在做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是所有的请求都会显示在②列表处,选择哪个下面列表就会出现对应的请求资源。
②是请求资源的列表
③是请求的状态,类型,大小,耗费的时间等,发送请求状态不对可相应的判断问题在哪里
点击资源列表右侧出现的是请求的详细信息也是关注的重点
①请求的路径,方法,状态,远程地址
②响应头
③请求头
④传递的参数
请求响应的内容
未完待续....