Question

怎样使用chrome的开发者工具

Answer 1

方法/步骤

1
打开chrome浏览器，进入任何一个网页（自己本地开发的html最好，便于理解）

2
鼠标右击某个元素标签，点击“审查元素“（或按F12），即可看到开发者界面：

3
点击“Elements”，这个界面会显示你当前所打开的页面的实现代码，选择下方放大镜一样的工具，然后点击自己想查看的地方，就好跳转到相应的实现代码：

4
点击"NetWork",可以看到当前页面加载的脚本和资源的时间，还可以看到某些没有被加载成功的资源：

5
点击"Sources"可以查看运行的脚本，调试一般都是在Sources调试的，这个界面可以跟踪每一行代码的运行已经数据的传递（需要开启断点）：

6
点击"Console"可以查看网页运行后提示的消息，错误或者警告以及输出内容等，类似于eclipse里的控制台输出。

7
至此，基本可以满足对页面内容的开发要求啦！如果再配以WebStorm这种“前端开发神器”，你就可以像开发“.java”文件一样的开发“.html和.js”文件。