浏览器调试常用技巧

        在做web应用程序开发的时候避免不了碰到问题，那么这时候就要用到浏览器自带的开发人员工具（按f12可打开）,调试工具的功能还是很多的，下面就来分享下使用比较频繁的功能。就以360为例（ie，谷歌，搜狗其实都是差不多用法看个人喜好）。

     经常要使用的功能：

•      Elements
•      Console
•      Sources
•      Network

     

工具图片

一、Elements功能用法

       点击Elements下面会展示当前页面的dom节点，当鼠标点击某个标签在右边的框框里面会出现前节点的样式，鼠标悬浮节点上空页面会显示该节点的高度宽度基本属性，想快速定位某个有问题的地方直接把鼠标放在它上面然后右键-->审查元素（谷歌叫检查）可直接打开这个工具定位到该节点。常见问题解决写完代码后发现样式不是自己预期的，如图所示找到该标签位置，可在①处标签内直接写样式写完后可以看到页面有变化（刷新后会变成原来的，因为这是在浏览器上面做调试真正的代码并没有改变），也可以在②处双击添加属性修改属性这里比较直观一边改页面就一边发生变化。在这里调样式非常节省时间，不用跑去修改代码然后刷新浏览器看效果，可以在浏览器上面调试好样式然后去修改代码。

二、Console功能用法

       

       我记得我刚开始写js的时候不知道怎么调试喜欢在代码里走一步alert一下看数值的变化，一段代码运行下来不停弹窗，碰到循环那酸爽不停的点。后来才发现浏览器也可以打印日志的只要在代码里面加上console.log()，程序运行去Console里面看就行了。程序运行的时候报错的信息也会显示在这里，常见的程序代码语法错误和响应状态400（前端传参和后端对应不上），404（找不到资源），500（服务器内部错误）可以点击错误在  Sources里面会定位到报错的地方。

三、Sources功能使用

     

点击Sources在最左边一栏里找到要调试的js 文件，然后出现

找到要调试的代码点击行数会出现蓝色的图标这个就是断点，程序运行到这里会停下等待操作 f8 f10 可以一步步调试。选中要观察的变量右键添加到watch，就可以看到变量的变化。如下图

       上面是在浏览上面找到js文件的方式进行调试，还有另一种方法在js代码中加上debugger 要保持调试工具是打开的状态，程序运行到这里会自动进入调试状态。

四、Network功能使用

     这个真的是用的非常多，程序的请求都会记录在这里

①这里有很多选项，all是所有的请求都会显示在②列表处，选择哪个下面列表就会出现对应的请求资源。

②是请求资源的列表

③是请求的状态，类型，大小，耗费的时间等,发送请求状态不对可相应的判断问题在哪里

点击资源列表右侧出现的是请求的详细信息也是关注的重点

①请求的路径，方法，状态，远程地址

②响应头

③请求头

④传递的参数

请求响应的内容

未完待续....