chrome浏览器调试工具的使用

如果看不到图片请跳转:http://www.cnblogs.com/mr-yuan/p/5979546.html

废话不多说,给大家介绍一下最基本的浏览器调试工具

这个就是chrome浏览器的调试界面,怎么调出来大家都知道吧 

第一个箭头是,选择元素,激活后,在页面中鼠标移动到那地方,下面的Elements窗口会自动移动到相应的代码段

第二个手机就是切换到手机界面

1.Elements是显示页面代码的窗口

2.console是浏览器控制台,可以直接在里面写js代码

3.Sources是调试窗口,这里用的最多的就是断点调试了

这个箭头是继续执行脚本的命令,如果后面还有断点,直接执行到后面的断点,没有断点直接执行到代码最后面

这个图标的作用是,直接执行完函数进行下一步,不进入函数

这个箭头是指进入函数逐步执行函数

这个箭头是跳出函数

这个是注释断点,和代码的注释一样,仍旧显示但是不起作用,这样就不需要在调试未完成的时候想要跑一编程序,挨个把断点删除,然后再添加了

这个图标激活之后,在代码出错之后会直接跳转到代码出错的那一行

两种断点

普通断点

这种蓝色的断点是普通的断点

 

条件断点

这种黄色的断点是条件断点,可以让函数直接跳转到你设置的条件那一步

 

添加条件断点

刷新页面后直接跳转到 i = 50的那一步

注意:是i==50;如果是i=50就是赋值运算了

监视窗口

可以选中变量后右键add to watch

在一种方法就是直接在wtach窗口添加

最后介绍的一个就是请求的窗口

这个窗口会保存所有请求的数据

这个是可以限速的,可以测试页面在不同的网速下打开的速度

直接点开下面的请求可以查看请求的详细信息