方法/步骤 打开chrome浏览器，进入任何一个网页（自己本地开发的html最好，便于理解） 鼠标右击某个元素标签，点击“审查元素“（或按F12），即可看到开发者界面： 点击“Elements”，这个界面会显示你当前所打开的页面的实现代码，选择下方放大镜一样的工具，然后点击自己想查看的地方，就好跳转到相应的实现代码： 点击"NetWork",可以看到当前页面加载的脚本和资源的时间，还可以看到某些没有被加载成功的资源： 点击"Sources"可以查看运行的脚本，调试一般都是在Sources调试的，这个界面可以跟踪每一行代码的运行已经数据的传递（需要开启断点）： 点击"Console"可以查看网页运行后提示的消息，错误或者警告以及输出内容等，类似于eclipse里的控制台输出。 至此，基本可以满足对页面内容的开发要求啦！如果再配以WebStorm这种“前端开发神器”，你就可以像开发“.java”文件一样的开发“.html和.js”文件。 注意事项 仅适用于chrome浏览器，其它浏览器的开发者工具某些地方会有些不同