建站
咨詢
售后
建站咨詢
新聞中心
昨天，我發(fā)現(xiàn)了一個很棒的JavaScript調(diào)試小工具，它是Chrome開發(fā)者工具之一。在小型Web開發(fā)會議中，Marcus Ross發(fā)表了關(guān)于在Chrome中實現(xiàn)各種JavaScript調(diào)試工具的談話，其中之一就是我想在此展示的console.table()函數(shù)。
10余年的岳塘網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。網(wǎng)絡(luò)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整岳塘建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)建站從事“岳塘網(wǎng)站設(shè)計”,“岳塘網(wǎng)站推廣”以來，每個客戶項目都認(rèn)真落實執(zhí)行。
通過console.log()記錄數(shù)組數(shù)據(jù)
想象一下你已經(jīng)創(chuàng)建了一個編程語言及其文件擴(kuò)展名的表：
- var languages = [
- { name: "JavaScript", fileExtension: ".js" },
- { name: "TypeScript", fileExtension: ".ts" },
- { name: "CoffeeScript", fileExtension: ".coffee" }
- ];
- console.log(languages)
調(diào)用console.log（languages）函數(shù)將會使你的數(shù)據(jù)得到如下顯示：
顯示樹狀結(jié)構(gòu)圖的目的是為了對調(diào)試有所幫助，但是我覺得有點(diǎn)麻煩，因為需要手動打開每個折疊的對象。我的意思是，我們可以通過console.table()函數(shù)做的更好一點(diǎn)。
通過console.table()記錄數(shù)組數(shù)據(jù)
我們通過調(diào)用console.table()來代替console.log()函數(shù)的使用：
- console.table(languages);
要確?？刂婆_在刷新頁面之前打開，否則你可能會看不到任何輸出。如果你的一切操作都正確的話，作為回報，你將看到這個漂亮的小表格視圖：
很漂亮是吧？更棒的事情是——可以按照表的每一列來排序：
當(dāng)然，此表對于表格格式的數(shù)據(jù)支持的***。如果所有對象都有著完全不同的數(shù)據(jù)結(jié)構(gòu)，你的表中將有大多數(shù)單元格含有未定義的值。盡管如此，屬性值的整齊排列也會給你一個很棒的總覽效果。
通過console.table()記錄對象數(shù)據(jù)
關(guān)于console.table()的另一個好處是它同樣適用于對象數(shù)據(jù)：
- var languages = {
- csharp: { name: "C#", paradigm: "object-oriented" },
- fsharp: { name: "F#", paradigm: "functional" }
- };
- console.table(languages);
這份禮物如上圖所示。
過濾顯示對象的屬性
- // Multiple property keys
- console.table(languages, ["name", "paradigm"]);
如果你想通過某些屬性限制表中的列時，你可以通過傳遞一個鍵值數(shù)組作為console.table()調(diào)用的第二個參數(shù)：
- // Multiple property keys
- console.table(languages, ["name", "paradigm"]);
對于單個屬性，一個簡單的字符串參數(shù)就足夠了：
- // A single property key
- console.table(languages, "name");
總結(jié)
我以為我知道大多數(shù)Chrome開發(fā)者工具自帶的功能，但是顯然我錯了。開發(fā)者工具中有很多很多有用的功能，只是在等你去使用它。說真的，去看看官方文檔的頁面，沒準(zhǔn)你會發(fā)現(xiàn)一些你不知道的很棒的功能。
名稱欄目：通過console.table()做高級JavaScript調(diào)試
文章路徑：http://m.5511xx.com/article/cdjoiej.html
