码迷,mamicode.com
首页 > 其他好文 > 详细

浏览器调试方法

时间:2018-11-13 13:09:20      阅读:221      评论:0      收藏:0      [点我收藏+]

标签:页面包含   鼠标   修改   localhost   ons   状态   使用   控制   刷新   

如下所有操作均以谷歌浏览器为准:
例如:
当打开首页时:
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变量可以在控制台上查看变量的值,并进行一系列的操作

浏览器调试方法

标签:页面包含   鼠标   修改   localhost   ons   状态   使用   控制   刷新   

原文地址:https://www.cnblogs.com/megadata/p/9951458.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!