无题
作为前端开发，我们每天都会用 Chrome DevTools 调试 Chrome 的网页，但其实它还可以远程调试安卓手机的网页。
那 Chrome DevTools 如何远程调试安卓网页呢？它的实现原理是什么？
今天我们就来了解一下：
远程调试安卓网页用数据线把安卓手机和电脑连接起来，在手机设置里打开 USB 调试：
然后在 chrome 打开 chrome://inspect 页面，勾选 Discover USB devices（默认是勾选的）：
这时候下面就会出现一个提示：请在设备上接受 debugging 会话
在手机上点击确定，就会建立调试会话：
下面就会列出所有可以调试的网页：
浏览器里的网页，或者 APP 调试包的 webview 的网页都会列出来。
点击 inspect 就可以调试了：
可以审查元素：
可以打断点：
也可以用 Performance 分析性能：
各种调试 PC 网页的功能基本都支持。这样就可以愉快的调试安卓的移动端网页了。
不过这个过程你可能会遇到这样的问题，打开的窗口是空白的或者是 404:
这是因为调试的目标可能 ...
无题
上节学会了用 Chrome 远程调试 Android 网页，这节来调试下 iOS 网页。
ios 网页调试只能用 safari 浏览器。
打开偏好设置 > 高级，勾选显示“开发”菜单：
之后就会出现“开发”菜单，下面会展示所有连接的设备：
它会提示你在 iPhone 上启用网页检查器。
这个是在 设置 > safari 浏览器 > 高级里开启的：
网页检查器下面也有这么一行提示：
之后在 Safari 浏览器里打开一个页面，比如 baidu.com：
在电脑的 Safari 浏览器的开发菜单里就会显示出这个网页：
不只是 Safari 浏览器，一些 APP 里内嵌的网页开启了调试的话也可以连接。
之后就可以在电脑上远程调试 iphone 上的网页了：
可以调试网络请求：
可以断点调试：
比如可以在所有未捕获的异常处断住，这是异常断点。
可以在请求某个 URL 的时候断住，这是 URL 断点：
可以添加事件断点：
还可以在 requestAnimationFrame、setInterval 的回调处断住。
而且在 Chrome DevTool ...
无题
前两节我们学习了用 chrome 远程调试安卓移动端网页，用 safari 远程调试 ios 移动端网页：
那他们是怎么实现呢？
首先，我们知道调试是 client server 的架构，比如 chrome 会使用 CDP 协议来传输数据。
传递的 CDP 数据可以通过 Protocol monitor 看到：
pc 端是这样，移动端也是这样，只不过传递协议数据的方式不大一样。
要想起一个有 CDP server 的浏览器，需要单独指定一些参数。
pc 端是跑 chrome 的时候带上 remote-debugging-port 参数，类似这样：
1/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
然后就可以连上这个端口进行调试了，不管你是用 chrome devtools 还是 vscode debugger 或者其余的 frontend UI。
那移动端呢？
自然也是一样的，要开启调试模式才有这个 CDP Server 可以连接。
andor ...
无题
现在的网站基本都是 https 的，而 charles 是常用的 http 抓包工具，所以用 charles 调试 https 请求是常见的需求。
这节就来讲下如何用 charles 调试 https 请求，如何断点调试。
首先安装 charles，点击 start recording：
浏览器访问一些页面，这时候左侧就会展示出抓到的 http/https 请求：
但是这时候抓到的是加密过后的内容，这是 https 的机制导致的：
服务端会下发被 CA 认证过的证书，里面包含了公钥，而服务器自己保留私钥，通过这种机制完成对称密钥的传输和身份的认证，之后加密传输数据。
中间人拿到的数据自然都是被加密过的，也就是上图的那些乱码：
那抓包工具怎么能拿到明文的数据呢？
自己用服务端的证书和服务端对接不就行了？
也就是这样：
Charles 自己用服务端的证书来和服务端通信，然后给浏览器一个自己的证书，这样就能解密传输的内容，拿到明文数据了。
点击 Proxy 的 SSL Proxy Setting：
添加一条对 juejin 的 https 代理：
这是 juejin ...
无题
Charles 做为主流的代理工具，有很多强大好用的功能，这两节我们就快速过一遍：
charles 代理的两种配置方式网页默认是走系统代理。
可以把 Charles 也设置为系统代理，点击 Proxy > macOS Proxy 即可：
这样就能抓到网页的数据包了。
或者不把 charles 设置为系统代理，而是 SwitchyOmega 单独指定网页的代理服务为 charles：
这里的代理服务的端口可以在 Proxy > proxy Settings 里看到：
当然，更好的方式是 auto switch，也就是根据条件自动切换。
也就是我们在选项里配置的情景模式：
这两种还是很容易理解的：
默认都是走系统代理，所以把 charles 配置为系统代理服务器就可以抓包了
网页也可以通过 SwitchyOmega 单独指定代理服务器，这时候请求会直接走 charles
no caching可以让 http 请求禁用缓存，在 Tools > No Caching 里开启：
当开启之后，你会发现 header 会带上 cache-control: no-ca ...
无题
当线上有报错的时候，大家是怎么定位问题的呢？
断点调试么？
但是这时候代码是被压缩过的，变量名都是 a、b、c、d 这种，根本看不出啥来。
如果调试线上报错能像本地开发的时候一样就好了。
其实这是可以做到的，这节就分享下如何优雅的调试线上报错：
首先，我们准备一段 JS 代码：
这是我随便找的一段 JS 代码，里面抛了一个错误。
然后用 webpack 进行编译：
在 index.html 里引入构建产物：
然后跑个静态服务器 npx http-server .
浏览器访问，就会发现代码确实报错了：
那问题来了，怎么定位错误原因呢？
首先，我们可以使用异常断点，在抛异常的地方断住：
创建一个 vscode 调试配置：
勾选 uncaught exceptions，在未被捕获的异常处断住：
然后启动调试：
你会发现代码在抛异常的地方断住了，这就是异常断点的功能。当你不知道哪里抛的异常的时候，可以用这个。
但现在代码是被压缩过的，看不出啥来：
怎么能直接定位到抛异常的源码呢？
这时候就要用到 sourcemap 了，它就是用于把编译后的源码映射回源码的：
首先要生成 ...
无题
上节学了常用的代理功能，这节我们来学其他的 charles 功能：
DNS Spoofing在本地准备一个 index.html，然后 npx http-server . 来跑一个静态服务器：
浏览器访问下：
执行 sudo vim /etc/hosts 修改 hosts 文件，添加一条 www.guangguangtest.com 到 127.0.0.1 的映射：
之后就可以用这个域名来访问了：
（如果你把科学上网的工具设置为系统代理，hosts 可能就不生效了，关掉即可）
除了浏览器，在 Terminal 也是可以通过 curl 访问的：
ping 也能 ping 通：
charles 也有这个功能，叫做 DNS Spoofing（DNS 欺骗），在 Tools > DNS Spoofing 开启：
它的功能和 hosts 类似：
比如我配置了 www.guangguangtest2.com 的域名到 127.0.0.1 的映射，之后就可以浏览器访问这个域名了：
但在 Terminal 还不行：
为什么呢？
因为 DNS Spoofin ...
无题
前面学习了 Chrome DevTools 的各种工具的使用，从这节开始深入下它的实现原理。
调试工具都包含 frontend、backend、调试协议、信道这四个部分：
而在 Chrome DevTools 里这个调试协议就是 Chrome DevTools Protocol，简称 CDP。
打开 CDP 的文档，可以看到 CDP 协议分为了不同的 Domain：
比如 DOM、CSS、Debugger 等，这个很容易理解，各种工具的数据通信总不能混到一起吧，所以分成了不同的域来管理。
每个 Domain 下都包含了 Methods 和 Events：
Method 就是 frontend 向 backend 请求数据，backend 给它返回相应的数据
Event 就是 backend 推送给 frontend 的一些数据。
你可以在 Chrome DevTools 的设置里开启 Protocol Monitor 面板：
在 More Tools 里打开：
然后你就可以看到当前页面所有的 CDP 数据交互：
双向箭头的就是 Method，单向箭头的就是 backend ...
无题
知道了如何调试 React 源码，这节我们再来调试下 Vue 源码。
首先，还是通过 vue cli 创建项目（要用 5.0 以上的 cli）：
安装 @vue/cli 后执行 vue create vue-demo 创建 vue 项目：
选择 vue3 的模版。
安装完之后进入到 vue-demo 目录，执行 npm run serve 把开发服务跑起来。
浏览器访问，会看到渲染出的页面：
修改下 vue.config.js，把 devtool 改成 source-map：
然后我们进行调试：
点击调试窗口的 create a launch.json file 来创建调试配置文件：
修改调试配置如下：
1234567891011{ "type": "chrome", "request": "launch", "name": "调试 Vue 项目", "runtimeExecutable": & ...
无题
VSCode Debugger 调试的时候需要创建调试配置，默认生成的配置往往不是符合需求的，需要做一些修改。
比如调试 Vue 项目时，默认生成的调试配置是这样的：
而我们最终用的是这样：
那能不能像生成默认配置一样，快速生成我们需要的调试配置呢？
可以的，这需要用到 VSCode 的 Snippets 功能。
Snippets 是代码片段的意思，输入前缀就可以快速填入代码片段。
我们如何自己写一个 Snipppets 呢？
按住 cmd + shift + p 调出 VSCode 命令面板，输入 snippets，选择 Configure User Snippets：
创建一个项目级别的 Snippets：
在 .vscode 下就会多出一个 xx.code-snippets 的文件：
注释的部分就是 demo 配置，我们把它打开：
prefix 就是这个 snippets 生效的前缀
body 是插入的内容
description 是描述
scope 是指定 snippets 生效的语言
这个 snippets 的作用就是在这个项目目录下的 js、ts ...