【相关来源】
Chrome调试工具developer tool技巧：http://www.xuanfengge.com/chrome-developer-debugging-tool-tool-tips.html
Browser-Sync：响应式Web开发调试利器：http://www.alloyteam.com/2014/02/browser-sync-responsive-web-development-and-debugging-tool/
-----------------------------------------------------------------------------
Google Chrome调试js入门
Google Chrome无论在我们平时的上网冲浪、或者程序开发，都给我们带来很大的便利，而这样创新、不作恶的一家公司在中国却走不下去。希望本篇使用Google Chrome中的开发者工具调试js文章，能带给每天来本站的数百位朋友一些帮助，以便能更好、更快的开发。本篇仅简单的以一个对json数据的访问为例，如果你对json数据格式不了解，那是不行的。推荐你看看IBM开发者提供的一份json 入门文档。
var json = { "comment": [ { "user": "朋友的你", "email": "test@gmail.com" }, { "user": "jQuery学习", "email": "test@gmail.com" } ] };首先，我们打开开发者工具，打开方式如下图，我们也可以使用快捷键 F12 来打开。
我们先来看看断点的设置，我在11行设置了断点，设置方法左侧点击即可，我太喜欢这个断点了，看起来真漂亮。刷新一下页面，执行如下图：
在向下执行之前，我们直接输入json(我们的对象名)，看看对象结构，可以非常清晰的看到json到底是个什么东西，不用太多的解释，如下图：
按F10向下执行，我们依次输入我们的变量名，本例中3个取值方法是相同的，调试结果如下图：
如果你还在使用alert()调试js代码，赶快丢弃吧。当然了，这仅是一篇非常非常简单的入门级文章，更多的精彩还得由你去发现！
Chrome浏览中的 workspace
Workspaces allow you to select custom directories in your file system which are always available for you to edit within the Sources panel. This can be one specific project directory or a directory that contains multiple different projects within it.
To use this feature it open the Workspaces tab via the Settings pane. Here you will see an Add Folder link allowing you to add local directories for editing (eg: project root directories).
Once you've added a folder directory, you will be able to view, edit and save changes to files within it anytime you are working in the Sources panel. All changes to files will persist down to local file contained in directory.
In addition to adding a file system for your Workspace, you are also able to add file Mappings individual file urls to the path of the file on your local machine.
那么Workspace到底是个啥东东能干啥用呢？
一句话，Ta能够在开发者工具中调试修改js或者css同时自动保存文件，能够避免开发人员在工具中调试好，再到编辑器中修改一次代码的重复操作，能够提高一定的效率。
四个步骤：（参见官网的步骤图片）
https://developers.google.com/chrome-developer-tools/docs/settings-files/workspace.png
参考教程：
http://isux.tencent.com/chrome-workspace.html
https://developers.google.com/chrome-developer-tools/docs/settings#workspace（官方教程）
Chrome开发，debug的使用方法。
怎样打开Chrome的开发者工具？
你可以直接在页面上点击右键，然后选择审查元素：
或者在Chrome的工具中找到：
或者，你直接记住这个快捷方式： Ctrl+Shift+I (或者Ctrl+Shift+J直接打开控制台)，或者直接按F12。
打开的开发者工具就长下面的样子：
不过我一般习惯与点左下角的那个按钮，将开发者工具弹出作为一个独立的窗口：
下面来分别说下每个Tab的作用。
【Elements标签页】
这个就是查看、编辑页面上的元素，包括HTML和CSS：
左侧就是对页面HTML结构的查看与编辑，你可以直接在某个元素上双击修改元素的属性，或者你点右键选"Edit as Html"直接对元素的HTML进行编辑，或者删除某个元素，所有的修改都会即时在页面上得到呈现。（注：看到上面右键菜单的最后一个选项"审查元素"了么？这是不是说明这个开发者工具的页面也是HTML来的呢？你点一下就知道了哦，嘿嘿）
你还可以对某个元素进行监听，在JS对元素的属性或者HTML进行修改的时候，直接触发断点，跳转到对改元素进行修改的JS代码处：
Elements标签页的右侧可以对元素的CSS进行查看与编辑修改：
你还可以通过这里看到各CSS选择器设置的CSS值的覆盖情况。
下面的Metrics可以看到元素占的空间情况（宽、高、Padding、Margin神马的）：
注意到上面的Properties没有？这个很有用哦，可以让你看到元素具有的方法与属性，比查API手册要方便得多哦（要注意某些方法和属性在IE、FireFox等其他浏览器下面的支持情况哦）。
【Resources标签页】
Resources标签页可以查看到请求的资源情况，包括CSS、JS、图片等的内容，同时还可以查看到存储相关的如Cookies、HTML5的Database和LocalStore等，你可以对存储的内容编辑和删除。
这里的CSS文件有一个好玩的特性，你可以直接修改CSS文件，并且修改即时生效哦：
【Network标签页】
Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用，特别是在查看Ajax类请求的时候，非常有帮助。注意是在你打开Chrome开发者工具后发起的请求，才会在这里显示的哦。
点击左侧某一个具体去请求URL，可以看到该请求的详细HTTP请求情况：
我们可以在这里看到HTTP请求头、HTTP响应头、HTTP返回的内容等信息，对于开发、调试，都是很有用的。
【Scripts标签页】
很明显，这个标签页就是查看JS文件、调试JS代码的，直接看下图的说明：
还有你可以打开Javascript控制台，做一些其他的查看或者修改：
你甚至还可以为某一XHR请求或者某一事件设置断点：
【Timeline标签页】
注意这个Timeline的标签页不是指网络请求的时间响应情况哦（这个在Network标签页里查看），这个Timeline指的JS执行时间、页面元素渲染时间：
点击底部的Record就可以开始录制页面上执行的内容。（这个不熟悉，请参考文末链接）
【Profiles标签页】
这个主要是做性能优化的，包括查看CPU执行时间与内存占用：
这个也不熟悉，不多说，还是请参考文末链接吧。
【Audits标签页】
这个对于优化前端页面、加速网页加载速度很有用哦（相当与Yslow）：
点击run按钮，就可以开始分析页面，分析完了就可以看到分析结果了：
它甚至可以分析出页面上样式表中有哪些CSS是没有被使用的哦：
【Console标签页】
就是Javascript控制台了：
这个除了查看错误信息、打印调试信息（console.log()）、写一些测试脚本以外，还可以当作Javascript API查看用。
例如我想查看console都有哪些方法和属性，我可以直接在Console中输入"console"并执行：
怎么样，一目了然了吧 ？再例如我想查看日期函数都有哪些方法：
（注：注意在这里看到的某些方法和属性是ES5新增的，记得兼容其他浏览器的支持情况哦）
【结语】
Google Chrome除了简洁、快速，现在的Chrome的插件也非常的丰富了。而对于web开发者来说，Chrome对于HTML5、CSS3等一些新标准的支持也是比较完善的，而且Chrome的开发者工具我个人认为真的非常好用，这就是为什么我向web开发者推荐使用Chrome的原因。
扫一扫
1201
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
