调试方法总结

365 阅读3分钟

Chrome 浏览器调试。

  • 遇到需要查询的dom元素的话,可以使用Alt + Click全部展开元素
  • 可以使用谷歌自带的$0查询元素

断点

一:在 Source 内容区设置

(1)找到要调试的文件,然后在内容源代码左侧的代码标记行处点击,即可打上一个断点。

(2)刷新浏览器,当页面代码运行到断点处便会暂停执行。 Console调试

方法2:在 js 文件中设置

(1)我们在 js 源文件中需要执行断点操作的代码前加上 debugger。

二、设置断点执行条件

(1)右键点击设置的断点,选择 Edit breakpoint...

(2)输入执行断点的条件表达式,当表达式为 true 时断点调试才会生效。有了条件断点,我们在调试代码的时候能够更加精确地控制代码断点的时机

使用技巧

(1)调试时当前调用在哪里,Call Stack 列表里的箭头便会指向哪里。同时当我们点击调用栈列表上的任意一处,便会调到相应的位置,方便我们再回头去看看代码。

(2)如果想重新从某个调用方法处执行,可以右键选择 Restart Frame。断点就会跳到此处开头重新执行,同时 Scope 中的变量值也会依据代码重新更改,这样就可以方便地回退来重新调试,省得我们再重新刷新整个页面。

三、DOM 元素设置断点

(1)我们右键点击需要监听的 DOM 节点,选择“Break On...”菜单项,在出现的三个选择项中任选一个便会添加断点。

(2)这三个选择项分别对应如下三种修改情况:

  • suntree modifications:子节点修改

  • attribute modifications:自身属性修改

  • node removal:自身节点被删除

(3)设置好断点后,当 DOM 元素要被修改时,代码就会在自动停留在修改处。

四、快捷方法

1,快速定位文件

使用快捷键:ctrl + p(win)、mac(command + p)

2,快速定位文件中成员函数

使用快捷键:ctrl + shif + o

移动端调试

  • 前提是你需要有一个 DEBUG 版的应用😄

Andriod

  • 打开手机的 USB 调试模式,通常在设置 -> 开发者选项中。

  • 在电脑上打开 Chrome 并登录 Google 帐户。(注:远程调试在隐身模式或访客模式下无法运行)

  • 在浏览器中访问 chrome://inspect,页面将显示您的设备上已启用调试的 WebView 列表。

  • 点击你需要 debug 的页面下方的 inspect 小按钮

前面是本机的ip地址,后面根据移动端location.href获取到的mid后面的 重定向的话还是跟在电脑上重定向的方式一样

注:需要翻墙才可使用图一

ios

打开safari的偏好设置

打开需要调试的页面, 再打开 mac 上的 safari ,开发 -> 选择自己的设备 -> 选择当前页面