标签：
接下来就是前端开发的另一大神器，chrome浏览器。
chrome浏览器可以实时的调试网页样式，断点查看js代码，查看请求参数，观察动画帧，以及进行响应式调节。不需要再装插件。当然fire bug也是一个非常优秀的调试插件。因为习惯问题我还是选择了chrome，在此将我的经验分享给大家。
首先是审查元素的界面，可以看到左侧是html文档，右侧是样式表，如果想查看某个dome元素，需要选中放大镜那个按钮然后去界面上选取，可以直观看到元素的大小，右侧样式表又可以展示出它的样式。
接着，我们可以直接再右侧栏进行编辑，这样可以直观的在网页上看到效果，但切记不要点击刷新，因为这只是暂时的，并没有保存。
编辑后效果会立马显现，比如这里调整margin 100px;那么这个元素就是向下和向左移动100像素，然后我们点击最右侧的样式表连接
进去就可以看到更改了的数字，这时候我们可以全选这个样式表，替换到服务器上之前的就可以更改了，很适合后期小规模样式调节，另外这个右侧编辑栏可以选中元素按up和down来细微调节。是不是十分方便。
接下来我们看resourse
这个栏存放的是网站的资源，以及缓存，包括应用存储和cookie,可以很方便的看清网站的相关资源，如果想借去别的网站的资源也可以从这里拿到。
network，这个是相当重要的调节栏，对开发服务器的人员来说，十分需要清楚发出去的数据和接收回来数据的正确性。
比如我们发送一个ajax请求web（截图仅供参考），那么就会在这个列表展示web，然后点进去可以看到header,preview ,response等栏目，分别对应的请求，响应预览和响应结果。hearder包含请求参数，请求路径，response反映的是来自服务器的结果。
假如你还不明白http协议具体对应的是哪些，可以从这里看到。（后面我再跟大家介绍个跟详细的）
sourse
这里可以拯救前端新手调试的噩梦，当你请求一个网站，它会在这里展示网站的脚本Js,比如我们想调试某个函数 clickMe,在脚本找到这个函数，在左侧轻击鼠标就可以打上一个端点，ok，不要关掉这个界面，刷新界面，点击出发这个函数就可以进到这个函数里面。查看各个步骤的详细数据了。
console
这个应该是最常用的栏目了。除了查看你写的console.log输出，它的另外一个神奇的用法就是可以查看浏览器的bom对象，比如我想查看window的方法，在这里输入后可以出现智能引导。你想知道哪个函数能用从这里就可以查到。
另外给大家一段代码(!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]]
大家在这个console输入以下，可以看到神奇的效果哦。以此来反击轻视js的其他开发人员吧。
前端-【学习心得】-使用工具提升你的工作效率(chrome)
标签：
原文地址：http://www.cnblogs.com/wq123/p/4396421.html
