不管是前端工程師或是後端工程師，網頁瀏覽器都是大家必須面對的重要議題，法洛威今日就跟大家說明如何開啟網頁瀏覽器中的「開發人員工具」，及「開發人員工具」各個子項目功能，協助讀者快速掌握瀏覽器學習重點。
如何開啟Google Chrome「開發人員工具」
常見的瀏覽器包括Google Chrome、Firefox、Edge，都有內建開發人員工具，協助前、後端工程師進行開發及debug。每個瀏覽器都有不同的「開發人員工具」，操作模式也不盡相同。本篇將舉Google Chrome為例，說明如何開啟Google Chrome「開發人員工具」。
至於要如何開始開啟Google Chrome「開發人員工具」，最簡單的方式就是按電腦上鍵盤件的「F12」就能開啟Google Chrome「開發人員工具」。
Chrome「開發人員工具」子項目功能
開啟Chrome「開發人員工具」後，就可能看到元素(Elements)、主控台(Console)、原始碼(Sources)、網路(Network)、效能(Performance)、記憶體(Memory)、應用程式(Application)、安全性(Security)及Lighthouse等共9個項目，以下即為各個子項目功能。
元素(Elements):可及時檢視網頁的HTML及CSS。
主控台(Console):可查看網頁關於Javascript程式碼。
原始碼(Sources):進行debug Javascript。
網路(Network):檢視網路行為及封包。
效能(Performance):能夠檢視網站的功能及速度。
記憶體(Memory):評估記憶體的執行情況。
應用程式(Application):可查看Web Sql、cookie、session、cache、圖字等。
安全性(Security):查看網站是否安全及分析SSL憑證。
Lighthouse: 可供開發人員執行各項稽核，例如網站的效能、無障礙程度。
