Chrome 开发者工具 教程

Chrome 开发工具指南

Chrome DevTools 是公认的优秀的前端调试工具，由于功能强大，所以使用起来有一定的学习门槛，与此同时 Chrome DevTools 暂时没有中文手册，对于不太熟悉英文的同学会比较吃力。

本项目的初衷是为想使用或者正在使用 Chrome DevTools 的同学提供一个中文手册，方便大家学习使用这个优秀的工具，提高前端开发效率和质量！

谷歌 Chrome 开发工具，是基于谷歌浏览器内含的一套网页制作和调试工具。开发者工具允许网页开发者深入浏览器和网页应用程序的内部。

该工具可以有效地追踪布局问题，设置 JavaScript 断点并可深入理解代码的最优化策略。

适用人群

这篇教程将会带你从头开始使用学习如何利用 Google 提供的组件进行 Chrome 上的相关开发调试工作。通过本教程，你将学会如何使用这些工具，并且学会如何通过它来分析调试提供的 Demo 。

学习前提

在你继续本教程之前，你必须对简单的术语有一定的了解，比如源码，文档等等。因为在你的组织下处理各级软件项目，如果你有软件工作的知识在软件开发和软件测试流程那是最好的。

参考英文：Chrome开发者工具英文文档

最新英文地址：https://developers.google.com/web/tools/setup/?hl=en

Chrome 开发者工具

Chrome 开发者工具是一套内置于 Google Chrome 中的 Web 开发和调试工具，可用来对网站进行迭代、调试和分析。

打开 Chrome 开发者工具

• 在 Chrome 菜单中选择 更多工具 > 开发者工具
• 在页面元素上右键点击，选择 “检查”
• 使用 快捷键 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)

Chrome Devtools 是谷歌浏览器自带的一个开发者调试工具，Chrome 本身汉化程度已很高，但 Devtools 工具并没有汉化，导致许多开发者在调试过程中难免遇到一些不方便，虽然网上可以下载一些网友汉化过的 resources.pak，但 Chrome 更新频繁，不同的版本不能通用替换，网上也很少有这方面的汉化教程，我这里简单说一下 resources.pak 的汉化过程和所使用的工具。