浏览器调试方法

Posted 2021-01-19 megadata

如下所有操作均以谷歌浏览器为准:
例如:
当打开首页时:
http://localhost:8080/index.html
如果该页面包含了框架(iframe)
1.打开浏览器,按F12(部分电脑需要一起按下Fn)
2.如果修改了js代码,并且需要调试的js所在页面在框架内部,则按下鼠标右键:
选择重新加载框架即可让浏览器页面加载最新的js(不需要清除缓存);
选择查看框架源代码得到类似如下的URL:
view-source:http://localhost:8080/getPage.do?page=1&rows=10
则删除view-source:
回车访问剩下的URL: http://localhost:8080/getPage.do?page=1&rows=10
即可进入框架(iframe)内部显示的内容的自身所在页面.
在此页面按下F12唤起浏览器控制台,即可直接找到需要调试的js文件
3.调试步骤:
在浏览器控制台唤起的状态下,鼠标右键点击网址栏的刷新按钮,选择第三个选项:清空缓存并硬性重新加载,即可清空该页面缓存(该操作清空的只是该页面缓存,所以已经登录的用户不会被清除,不需要重新登录)
此时会初始化页面使用到的所有的js
切换到浏览器console,找到"三个点"图标,点击,选择search,console上回显示一个输入框(search)
将需要调试的js方法名输入到该搜索框,回车,将会定位到页面和js中的该方法
在js函数的该方法上打断点,然后触发相应的事件,执行对应的js函数即可
4.在进入断点时,已经走过的代码的js变量可以在控制台上查看变量的值,并进行一系列的操作