调试

APP 内

微信

微信下调试H5页面open in new window

Chrome 调试

远程调试

参考文档：在安卓设备上使用 Chrome 远程调试功能open in new window

可能遇到的问题及解决方法：

手机设置里，打开“USB 调试”开关后，Chrome 上未显示设备，可尝试以下解决方法：
- 使用正规的数据线（最好是原装的）
- 重置“开发者选项”

Charles

iOS 安装证书

在 Safari 中访问http://chls.pro/ssl，安装证书
（需要抓包 https 时，针对 iOS 11 及以上）打开【设置】>【通用】>【关于本机】>【证书信任设置】，将上一步安装的证书设置为信任

浏览器控制台

$ 符号

$0 ~ $4：在 elements 面板中标记一个 DOM 元素，然后在 console 中使用它。Chrome Inspector 会保存最后 5 个元素在其历史记录中，所以最后标记的元素可以用 $0 来显示，倒数第二个被标记的元素为 $1 ，以此类推。
$(selector)：$('.class')会返回 CSS 选择器所匹配的第一个元素
$(selector)：$('.class')会返回所有的元素
$_：返回最近执行表达式的值

事件相关

getEventListeners(document)：返回指定 DOM 元素上注册的事件监听器。
monitorEvents(window, ['resize', 'scroll'])/unmonitorEvents(DOMElement)：在指定 DOM 元素上触发任何事件时，都可以在控制台中看到相关信息。直到取消对相应元素的监视。

debugger

if (thisThing) {
  debugger
}

调试

APP 内

微信

Chrome 调试

远程调试

Charles

iOS 安装证书

浏览器控制台

$ 符号

事件相关

debugger

断点调试

JS 断点调试

Sources 断点

DOM 断点调试

XHR 断点调试

事件监听断点调试

Reference

# 调试

# APP 内

# 微信

# Chrome 调试

# 远程调试

# Charles

# iOS 安装证书

# 浏览器控制台

# $ 符号

# 事件相关

# debugger

# 断点调试

# JS 断点调试

# Sources 断点

# DOM 断点调试

# XHR 断点调试

# 事件监听 断点调试

# Reference

调试

APP 内

微信

Chrome 调试

远程调试

Charles

iOS 安装证书

浏览器控制台

$ 符号

事件相关

debugger

断点调试

JS 断点调试

Sources 断点

DOM 断点调试

XHR 断点调试

事件监听断点调试

Reference