如何在瀏覽器控制台中將資料顯示為表格

如何在瀏覽器控制台中將資料顯示為表格

控制台是瀏覽器內建的工具,用來記錄網站上發生的錯誤。如果出現任何錯誤 - 例如斷開的連結、不完整的JavaScript函數或未知的 CSS 屬性 - 瀏覽器將在控制台中顯示錯誤訊息。

您還可以透過 shell 和 Console API 與 Console 進行交互,這對於測試某些功能和輸出資料很有用。在這裡,本文將向您展示使用 Console API 的有用技巧。

在瀏覽器上造訪控制台

在 Chrome 中,您可以選擇「檢視」>「開發者」>「JavaScript 控制台」來顯示控制台。此外,您還可以使用鍵盤快速鍵:OS X 上的Cmd+ Option+和 Windows 上的+ + 。JCtrlShiftJ

下面是一個沒有錯誤的 Chrome 控制台。

如何在瀏覽器控制台中將資料顯示為表格

從這裡,您可以開始使用控制台 API 中提供的命令。

與控制台交互

您可以透過控制臺本身並新增 JavaScript 與瀏覽器的控制台進行互動。例如,這裡我們要求控制台輸出結果“Good Morning!”直接在控制台中輸入console.log()指令:

如何在瀏覽器控制台中將資料顯示為表格

如前所述,您也可以套用console.log()。Console.log()可用來測試 JavaScript 條件語句。借助console.log() ,您可以更清楚地看到結果何時傳回假(true 或 false)

這是一個例子:

var a = 1;

if(a == 1) {

console.log('true');

} else {

console.log('false');

}

上面的程式碼將傳回true,因為變數包含數字1。在控制台中,您將看到瀏覽器輸出內容為「true」的文字

如何在瀏覽器控制台中將資料顯示為表格

以表格形式輸出數據

有時,您必須處理資料數組或物件列表,如下所示:

var data = [

{ name: "Andi", age: "21", city: "Tuban" },

{ name: "Ani", age: "25", city: "Trenggalek" },

{ name: "Adi", age: "30", city: "Kediri" }

];

console.table(data);

當我們使用 console.log() 方法時,這些資料將很難讀取console.log()方法將在可折疊的樹視圖中顯示數組,如下所示。

如何在瀏覽器控制台中將資料顯示為表格

當您必須處理這樣的陣列時,使用console.table()是輸出資料的更好方法。此方法以表格格式顯示資料。採用與上面相同的數據,結果將如下所示:

如何在瀏覽器控制台中將資料顯示為表格

瀏覽器控制台可協助 Web 開發人員處理網站中的錯誤。使用者也可以使用它來檢查資料輸出,就像使用console.log() 方法一樣。當您有資料數組時,console.table()命令更有用,因為它以易於閱讀的表格格式顯示數組。請注意,console.table()僅適用於基於 Webkit 的瀏覽器,例如 Chrome、Safari 和最新版本的 Opera。

希望你成功。


什麼是惡意軟體 HackTool:Win32/Keygen?如何去除?

什麼是惡意軟體 HackTool:Win32/Keygen?如何去除?

您是否掃描過您的設備並發現它感染了 HackTool:Win32/Keygen?在您使用破解或金鑰產生器啟動進階軟體後,Windows Defender 可能會自動警告您有關此惡意軟體的存在。

在 Windows 10 上建立備份和還原點(Restore Point)的說明

在 Windows 10 上建立備份和還原點(Restore Point)的說明

探索如何在Windows 10上建立和管理還原點,這是一項有效的系統保護功能,可以讓您快速還原系統至先前狀態。

在 Windows 10 中開啟裝置管理員的 15 種方法

在 Windows 10 中開啟裝置管理員的 15 種方法

您可以使用以下 15 種方法輕鬆在 Windows 10 中開啟<strong>裝置管理員</strong>,包括使用命令、捷徑和搜尋。

Windows「顯示桌面」的 10 種超快速方法

Windows「顯示桌面」的 10 種超快速方法

很多人不知道如何快速顯示桌面,只好將各個視窗一一最小化。這種方法對於用戶來說非常耗時且令人沮喪。因此,本文將向您介紹Windows中快速顯示桌面的十種超快速方法。

如何使用 Windows Repair 修復 Windows 錯誤

如何使用 Windows Repair 修復 Windows 錯誤

Windows Repair 是一款有效的 Windows 錯誤修復工具,幫助使用者修復與 Internet Explorer、Windows Update 和其他重要程式相關的錯誤。

如何在 Windows 10 中開啟資料夾選項或檔案總管選項

如何在 Windows 10 中開啟資料夾選項或檔案總管選項

您可以使用檔案總管選項來變更檔案和資料夾的工作方式並控制顯示。掌握如何在 Windows 10 中開啟資料夾選項的多種方法。

有關在 Windows 10 上刪除使用者帳戶的 5 種方法的說明

有關在 Windows 10 上刪除使用者帳戶的 5 種方法的說明

刪除不使用的使用者帳戶可以顯著釋放記憶體空間,並讓您的電腦運行得更流暢。了解如何刪除 Windows 10 使用者帳戶的最佳方法。

如何使用Bootsect /nt60將VBC更新為BOOTMGR

如何使用Bootsect /nt60將VBC更新為BOOTMGR

使用 bootsect 命令能夠輕鬆修復磁碟區引導程式碼錯誤,確保系統正常啟動,避免 hal.dll 錯誤及其他啟動問題。

Windows 11 中的存檔應用程式功能是什麼?應該啟用還是停用它?

Windows 11 中的存檔應用程式功能是什麼?應該啟用還是停用它?

存檔應用程式是一項功能,可以自動卸載您很少使用的應用程序,同時保留其關聯的檔案和設定。了解如何有效利用 Windows 11 中的存檔應用程式功能。

如何在 Windows 10 上為 BlueStacks 5 啟用虛擬化 (VT)

如何在 Windows 10 上為 BlueStacks 5 啟用虛擬化 (VT)

要啟用虛擬化,您必須先進入 BIOS 並從 BIOS 設定中啟用虛擬化,這將顯著提升在 BlueStacks 5 上的效能和遊戲體驗。