关于在 火狐 IE 和 360 下的调试心得

以前基本上是纯后台的，蛮少接触js，最近进了个公司，每天在弄前端，慢慢的自己的前端功底也有了一定的长进，在此总结下自己这段时间对火狐 调试 还有IE 的 一些心得，同时也希望大神能补充点评。

个人感觉浏览器调试各有各的优点吧，IE的简单明了，火狐的功能强大，360的纯英文对我来说就是硬伤了。

开始聊聊火狐吧，以前老版本的firebug 按F12，就行了，最近下了个最新版本（firefox 22.0）的 快捷键是 cirl + shift +s 调出操作界面。

操作界面一共分为 以下几大块 ：Web控制台,查看器,调试器,样式编辑器,分析器,还有右边的几个小图标。

Web控制台：

先从web控制台开始说，当点开后，刷新页面就可以看到很多条数据，在这里可以很清晰的知道该页面是引用了哪些文件(JS,CSS,GIF图片等)，还有日志。在这里其实就可以通过查看日志，或者每个 引用文件的后面的状态码来判断，200 是正常,304是与之前相比没有改变，404 是找不到，通过这些信息，我们可以很容易的定位出各个引用文件的情况,日志就记录了一些js变量或者对象的一些特殊情况，例如解析出错，声明有问题。

查看器：

 当点击查看器后，左边窗口是HTML代码 ，右边是CSS样式表，该功能就能够使我们很清晰的定位页面元素的HTML 代码了，当我们点击页面上某个地方的时候，他会自动定位到该位置的代码，最重要的是我们还可以即时修改，修改后鼠标移开点下，立刻就生效，真乃是前端工程师必备神器啊。

调试器：

这个就是本人用的最多的了，主要是针对js用来调试的，和java 的debug 差不多，真可谓是强大之至。

此处，当点开后有三个窗体，左边第一个是用来列出所引用的所有js文件，中间窗体展示出js代码，我们可以通过点击左边的js文件来选择要查看的js代码，，当你点击当前网页所对应的域名的时候，就能看到当前的html 加js代码，然后最右边那个窗体是用于在调试的时候来查看变量的值得。

我们可以在js代码里面如同java一样设置断点，就是点击该代码最左边显示行数的地方就会打上断点，然后按F6，此时在页面进行操作的时候如果运行到你打断点位置的代码的时候就会停止，你可以通过按F7 跨越(就是当前代码一行行走),F8步进（如果有函数，就会进入函数当中），shift + F8步出（可以跳出当前所处函数），然后在最右边 添加监视表达式下面可以输入你想查看的变量名称去查看此时的值。

例外还有个脚本过滤器（位于操作界面右上角），cirl + P，在这里可以搜索js代码，不过值得提醒的是 切记要看说明，我刚开始就是没看说明直接想当然的去用，感觉好白痴，在这里也介绍下，直接搜索的话是搜索相对应的js文件；当按Cirl + Alt+F后，搜索框里会出现个 ！符号，这时候输入搜索点击回车键就可以在所有js文件里查找代码；Cirl+F后搜索框里会出现#符号，此时就是在当前js文件里查找代码；Cirl+D会出现@符号，次数输入就是搜索定义的函数；Cirl+J后文本框显示：符合，此时输入行数， 跳到当前所处js相对应行数；最后个Cirl+Alt+V，按了后搜索框显示*符号，此时可以通过输入来过滤右边监控表达式窗体中其他不必要的变量，显示你所输入的变量。

样式编辑器：

这里应该主要也是前段工程师操作的领域,点开后，和调试器(JS)差不多，左边是所引用的css文件，右边是css代码，通过点击左边的css文件可以查看该css文件里的样式代码。

分析器：

这里说实话我没用过，但是存在就有他存在的道理，希望有大神能补全，写的清晰明了一点，在此致谢！

例外操作界面右上角还有几个小图标，第一个扫把一样的，高亮画出区域，稍微用了下，没感觉到什么，第二个3D视图，这个见名知意了吧，可以用来体现出页面的层次感，你甚至可以去拖拉一下。第三个代码片段速记器，这个有用了啊，点开后重新弹出个窗体，里面有注释教你怎么用，强大不解释，看下注释就能用了，最常用的是输入 个html中的id，选中按Cirl+I直接可以弹出个框，显示他的所有属性。

最后总结下基本上是使用IE 和 火狐，IE js调试的时候，当你鼠标移上去直接会显示该变量的值，这点是我用java  Debug所养成的习惯，360纯英文版的界面，不过他和火狐一样都可以直接点击页面 然后右键审查元素就可以定位到此处的代码位置，每次用IE 的时候有些控件或者按钮 因为是其他原因产生的，老是点不中，所以还是比较倾向于火狐的，完毕，希望能帮到刚开始使用的一些朋友，也希望有大神发现其他强大常用的功效予以补充，再次致谢读者。