Chrome控制檯中Network的Preview的正確用法?

Tags: 用法, 控制檯,

一般情況下我們看Network裡面的Preview和Response的結果似乎一模一樣。

不管是請求頁面,請求頁面還是請求js還是請求css,二者的結果都一樣。直到今天從服務器端向web前端發送一段json格式的數據,才發現Preview的特殊功效。

工具/原料

Chrome瀏覽器

方法/步驟

一般情況下我們看Network裡面的Preview和Response的結果似乎一模一樣。不管是請求頁面,請求頁面還是請求js還是請求css,二者的結果都一樣。

如下圖:

Chrome控制檯中Network的Preview的正確用法

Chrome控制檯中Network的Preview的正確用法

直到今天從服務器端向web前端發送一段json格式的數據,才發現Preview的特殊功效。

如下是Response的數據(即返回結果),不具備可讀性。

Chrome控制檯中Network的Preview的正確用法

在Preview(預覽功能)中,控制檯會把發送過來的json數據自動轉換成javascript的對象格式。

Chrome控制檯中Network的Preview的正確用法

而且可以層層展開,方便前端工程師遍歷調用(特別是在多維的情況下)。

如下代碼:

$.each(data,function(key,value){

//...

$.each(value.homework,function(k,v){

//...

})

});

Chrome控制檯中Network的Preview的正確用法

相關問題答案