Chrome瀏覽器是眾多開發(fā)者首選的瀏覽器之一。對(duì)于開發(fā)者來(lái)說(shuō)，如何展示相應(yīng)的json數(shù)據(jù)是一個(gè)非常重要的問(wèn)題。在Chrome中展示JSON數(shù)據(jù)的方法非常簡(jiǎn)單，我們可以在開發(fā)工具的控制臺(tái)中直接輸入JavaScript對(duì)象，并將其輸出到console中。

var obj = {
title: 'Chrome展示JSON數(shù)據(jù)',
content: 'Chrome開發(fā)工具的console可以展示JSON數(shù)據(jù)'
};
console.log(obj);

這段代碼將打印出一個(gè)具有鍵值對(duì)的JavaScript對(duì)象，其中包含了標(biāo)題和內(nèi)容。我們?cè)陂_發(fā)過(guò)程中，通常需要將后端返回的JSON數(shù)據(jù)展示在前端頁(yè)中，這時(shí)候可以利用瀏覽器的開發(fā)工具來(lái)查看JSON數(shù)據(jù)。

在Chrome瀏覽器中，我們可以使用“Network”面板來(lái)查看所有請(qǐng)求的數(shù)據(jù)。例如，我們可以使用以下代碼向后端發(fā)送一個(gè)請(qǐng)求：

fetch('https://jsonplaceholder.typicode.com/posts/1').then(response =>{
return response.json();
}).then(data =>{
console.log(data);
});

通過(guò)這個(gè)請(qǐng)求，我們可以得到一個(gè)JSON格式的數(shù)據(jù)，可以看到其結(jié)構(gòu)非常清晰，每個(gè)鍵值對(duì)之間用逗號(hào)隔開，鍵和值之間用冒號(hào)隔開。我們可以在控制臺(tái)中查看這個(gè)數(shù)據(jù)，也可以將其展示在頁(yè)面中：

fetch('https://jsonplaceholder.typicode.com/posts/1').then(response =>{
return response.json();
}).then(data =>{
var pre = document.createElement('pre');
pre.innerText = JSON.stringify(data, null, 2);
document.body.appendChild(pre);
});

稍作解釋一下上面的代碼，首先我們需要使用JavaScript的fetch方法發(fā)送一個(gè)GET請(qǐng)求，得到后端返回的數(shù)據(jù)；然后我們利用JSON.stringify()方法將數(shù)據(jù)轉(zhuǎn)換為JSON字符串并賦值給pre標(biāo)簽；最后我們將其添加到HTML文檔中。通過(guò)這個(gè)方法，我們可以看到一個(gè)非常清晰的JSON數(shù)據(jù)展示在我們的頁(yè)面中。