【Chorme】前端调试工具之Chorme专篇

    【相关来源】

• Browser-Sync：响应式Web开发调试利器

• 开发者调试工具Chrome Workspace

• Chrome中的 workspace 工具（官方）
  

• Chrome调试工具developer tool技巧

• 【Chrome开发，debug的使用方法。】

• 【Google Chrome调试js入门】

• 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对于HTML五、CSS3等一些新标准的支持也是比较完善的，并且Chrome的开发者工具我我的认为真的很是好用，这就是为何我向web开发者推荐使用Chrome的缘由。