chrome浏览器调试工具的使用
chrome浏览器调试工具的使用
给大家介绍一下最基本的浏览器调试工具
这个就是chrome浏览器的调试界面,怎么调出来大家都知道吧
第一个箭头是,选择元素,激活后,在页面中鼠标移动到那地方,下面的Elements窗口会自动移动到相应的代码段
第二个手机就是切换到手机界面
1.Elements是显示页面代码的窗口
2.console是浏览器控制台,可以直接在里面写js代码
3.Sources是调试窗口,这里用的最多的就是断点调试了
:这个箭头是继续执行脚本的命令,如果后面还有断点,直接执行到后面的断点,没有断点直接执行到代码最后面
这个图标的作用是,直接执行完函数进行下一步,不进入函数
这个箭头是指进入函数逐步执行函数
这个箭头是跳出函数
这个是注释断点,和代码的注释一样,仍旧显示但是不起作用,这样就不需要在调试未完成的时候想要跑一编程序,挨个把断点删除,然后再添加了
这个图标激活之后,在代码出错之后会直接跳转到代码出错的那一行
两种断点
普通断点
这种蓝色的断点是普通的断点
条件断点
这种黄色的断点是条件断点,可以让函数直接跳转到你设置的条件那一步
添加条件断点
刷新页面后直接跳转到 i = 50的那一步
注意:是i==50;如果是i=50就是赋值运算了
监视窗口
可以选中变量后右键add to watch
在一种方法就是直接在wtach窗口添加
最后介绍的一个就是请求的窗口
这个窗口会保存所有请求的数据
这个是可以限速的,可以测试页面在不同的网速下打开的速度
直接点开下面的请求可以查看请求的详细信息
