方法/步驟 打開chrome瀏覽器，進入任何一個網頁（自己本地開發的html最好，便于理解） 鼠標右擊某個元素標簽，點擊“審查元素“（或按F12），即可看到開發者界面： 點擊“Elements”，這個界面會顯示你當前所打開的頁面的實現代碼，選擇下方放大鏡一樣的工具，然后點擊自己想查看的地方，就好跳轉到相應的實現代碼： 點擊"NetWork",可以看到當前頁面加載的腳本和資源的時間，還可以看到某些沒有被加載成功的資源： 點擊"Sources"可以查看運行的腳本，調試一般都是在Sources調試的，這個界面可以跟蹤每一行代碼的運行已經數據的傳遞（需要開啟斷點）： 點擊"Console"可以查看網頁運行后提示的消息，錯誤或者警告以及輸出內容等，類似于eclipse里的控制臺輸出。 至此，基本可以滿足對頁面內容的開發要求啦！如果再配以WebStorm這種“前端開發神器”，你就可以像開發“.java”文件一樣的開發“.html和.js”文件。 注意事項 僅適用于chrome瀏覽器，其它瀏覽器的開發者工具某些地方會有些不同