## Web 開發者工具 >Web 開發者工具允許開發者測試和調試代碼, 它們不同于網站生成器和 IDE, 因為 Web 開發者工具不直接參與網頁的創建, 而是用于測試網站或 Web 應用的用戶界面接口的工具. >Web 開發者工具是瀏覽器的加載項或內置功能. 當今最流行的web瀏覽器, Google Chrome, Firefox, Opera, Internet Explorer, 和 Safari 都內置工具用于幫助開發者, 并且在各自的插件下載中心, 還提供很多額外的加載項. >Web 開發者工具允許開發者使用各種各樣的 Web 技術, 包括 HTML, CSS, DOM, JavaScript 和 其它瀏覽器能夠處理的組件. 由于日益增長的需求, 更多流行的 Web 瀏覽器包括了更多面向開發人員的功能. 盡管大多數瀏覽器都配備了開發者工具, 但是 [谷歌開發者工具](https://developers.google.com/web/tools/chrome-devtools/) 是目前談論最多, 應用最廣泛的開發者工具. 我建議學習和使用 [谷歌開發者工具](https://developers.google.com/web/tools/chrome-devtools/), 因為谷歌開發者工具周圍有學習 Web 開發者工具最好的資源. **學習使用谷歌開發者工具:** <ul> <li><a href="http://discover-devtools.codeschool.com/" target="_blank">Explore and Master Chrome DevTools</a></li> <li><a href="https://code.tutsplus.com/courses/chrome-developer-tools" target="_blank">Chrome Developer Tools</a> [watch][$]</li> <li><a href="http://www.pluralsight.com/courses/chrome-developer-tools" target="_blank">Using The Chrome Developer Tools</a> [watch][$]</li> </ul> **谷歌開發者工具文檔:** <ul> <li><a href="https://developers.google.com/web/tools/chrome-devtools/#docs" target="_blank">Per-Panel Documentation</a></li> <li><a href="https://developers.google.com/web/tools/javascript/command-line/command-line-reference?hl=en" target="_blank">Command Line API Reference</a></li> <li><a href="https://developers.google.com/web/tools/iterate/inspect-styles/shortcuts" target="_blank">Keyboard &amp; UI Shortcuts Reference</a></li> <li><a href="https://developer.chrome.com/devtools/docs/settings" target="_blank">Settings</a></li> </ul> **新聞/簡報/博客/建議:** * [Dev Tips](https://umaar.com/dev-tips/)