前端调试从入门到精通话题讨论 - 编程导航 | 2026最新前端调试从入门到精通相关编程话题

前端调试从入门到精通

42 参与

快来分享你的内容吧～

写文章

写面经

向专家提问，帮你解惑

点击登录，快来和大家讨论吧～

表情

图片

话题

打卡

综合

交流

文章

问答

沃尔夫冈

2024-09-17
用户中心前端 [ nginx docker] 部署
nginx 方式部署环境：nginx 版本 1.18.0-1.27.1os: linuxnginx 安装方式很多自行百度，最简单的使用安装包的方式，下面都是基于安装包的模式进行的。前端项目构建 "npm run build"构建成功目录 dist ,里面的内容放入 /usr/share/nginx/html 中或自己定义一个。（安装包模式下 nginx 不是 root 用户注意权限问题，目录所属
查看全文
React
运维
用户中心项目
前端调试从入门到精通
1
0
0
分享
神说要有光

2024-05-24·
前端开发
【前端调试专栏（45）】实现 Chrome DevTools 的 Coverage 功能
上节我们把 chrome devtools frontend 跑起来，然后连上自己做的 CDP backend，实现了 network 面板、element 面板的对接，明白了 Chrome DevTools 的运行原理。那我们能基于已有的 backend，自己实现 frontend 么？当然也是可以的。我们通过命令行的方式把 chrome 跑起来，通过 remote-debugging-p
查看全文
前端
前端调试从入门到精通
8
0
0
分享
神说要有光

2024-05-02·
前端开发
【前端调试专栏（44）】手动对接 CDP 来理解 Chrome DevTools 实现原理
前面学习了 Chrome DevTools 的各种工具的使用，从这节开始深入下它的实现原理。调试工具都包含 frontend、backend、调试协议、信道这四个部分：而在 Chrome DevTools 里这个调试协议就是 Chrome DevTools Protocol，简称 CDP。打开 CDP 的文档，可以看到 CDP 协议分为了不同的 Domain：比如 DOM、CSS、Debu
查看全文
前端
前端调试从入门到精通
7
0
0
分享
神说要有光

2024-04-27·
前端开发
【前端调试专栏（43）】线上报错如何直接调试本地源码？
当线上有报错的时候，大家是怎么定位问题的呢？断点调试么？但是这时候代码是被压缩过的，变量名都是 a、b、c、d 这种，根本看不出啥来。如果调试线上报错能像本地开发的时候一样就好了。其实这是可以做到的，这节就分享下如何优雅的调试线上报错：首先，我们准备一段 JS 代码：这是我随便找的一段 JS 代码，里面抛了一个错误。然后用 webpack 进行编译：在 index.html 里引入
查看全文
前端调试从入门到精通
12
0
0
分享
神说要有光

2023-11-20·
前端开发
【前端调试专栏（42）】Charles 全功能速通（下）
上节学了常用的代理功能，这节我们来学其他的 charles 功能： DNS Spoofing 在本地准备一个 index.html，然后 npx http-server . 来跑一个静态服务器：浏览器访问下：执行 sudo vim /etc/hosts 修改 hosts 文件，添加一条 www.guangguangtest.com 到 127.0.0.1 的映射：之后就可以用这个域名来访问了
查看全文
蜗牛：
我是一名后端人员，今天听听说讲才知道 Charles ，我就知道星球里的大佬肯定有类似的教程。果不其然。使用这个工具调试时间缩短了不是，之前是复制参数，现在是只管发送就行。
前端
前端调试从入门到精通
17
1
0
分享
神说要有光

2023-11-20·
前端开发
【前端调试专栏（41）】Charles 全功能速通（上）
Charles 做为主流的代理工具，有很多强大好用的功能，这两节我们就快速过一遍： charles 代理的两种配置方式网页默认是走系统代理。可以把 Charles 也设置为系统代理，点击 Proxy > macOS Proxy 即可：这样就能抓到网页的数据包了。或者不把 charles 设置为系统代理，而是 SwitchyOmega 单独指定网页的代理服务为 charles：这里的代理服
查看全文
前端
前端调试从入门到精通
9
0
0
分享
神说要有光

2023-11-16·
前端开发
【前端调试专栏（40）】如何用 Charles 断点调试 https 请求？
现在的网站基本都是 https 的，而 charles 是常用的 http 抓包工具，所以用 charles 调试 https 请求是常见的需求。这节就来讲下如何用 charles 调试 https 请求，如何断点调试。首先安装 charles，点击 start recording：浏览器访问一些页面，这时候左侧就会展示出抓到的 http/https 请求：但是这时候抓到的是加密过后的内容
查看全文
前端
前端调试从入门到精通
15
0
0
分享
神说要有光

2023-11-16·
前端开发
【前端调试专栏（39）】远程调试移动端网页的原理
前两节我们学习了用 chrome 远程调试安卓移动端网页，用 safari 远程调试 ios 移动端网页：那他们是怎么实现呢？首先，我们知道调试是 client server 的架构，比如 chrome 会使用 CDP 协议来传输数据。传递的 CDP 数据可以通过 Protocol monitor 看到： pc 端是这样，移动端也是这样，只不过传递协议数据的方式不大一样。要想起一个有 CD
查看全文
前端
前端调试从入门到精通
13
0
0
分享
神说要有光

2023-11-10·
前端开发
【前端调试专栏（38）】如何远程调试 ios 移动端网页
上节学会了用 Chrome 远程调试 Android 网页，这节来调试下 iOS 网页。 ios 网页调试只能用 safari 浏览器。打开偏好设置 > 高级，勾选显示“开发”菜单：之后就会出现“开发”菜单，下面会展示所有连接的设备：它会提示你在 iPhone 上启用网页检查器。这个是在设置 > safari 浏览器 > 高级里开启的：网页检查器下面也有这么一行提示：之后在 Safa
查看全文
前端调试从入门到精通
前端
8
0
0
分享
神说要有光

2023-11-08·
前端开发
【前端调试专栏（37）】如何远程调试 android 移动端网页
作为前端开发，我们每天都会用 Chrome DevTools 调试 Chrome 的网页，但其实它还可以远程调试安卓手机的网页。那 Chrome DevTools 如何远程调试安卓网页呢？它的实现原理是什么？今天我们就来了解一下：远程调试安卓网页用数据线把安卓手机和电脑连接起来，在手机设置里打开 USB 调试：然后在 chrome 打开 chrome://inspect 页面，勾选 Di
查看全文
前端
前端调试从入门到精通
15
0
0
分享

热门话题

用户中心前端 [ nginx docker] 部署

## nginx 方式部署环境： nginx 版本 1.18.0-1.27.1 os: linux nginx 安装方式很多自行百度，最简单的使用安装包的方式，下面都是基于安装包的模式进行的。前端项目构建 `npm run build` 构建成功目录 dist ,里面的内容放入 /usr/share/nginx/html 中或自己定义一个。（安装包模式下 nginx 不是 root 用户注意权限问题，目录所属用户应为 www-data） nginx 配置文件 http 模块如果有 include /etc/nginx/conf.d/*.conf; 下面的文件放入目录即可，如果没有直接将配置放入 htpp 模块 nginx 配置文件 frontend.conf (名字带 .conf 即可) ``` server { listen 80; # gzip config gzip on; gzip_min_length 1k; gzip_comp_level 9; gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; gzip_vary on; gzip_disable "MSIE [1-6]\."; location / { # 用于配合 browserHistory使用 try_files $uri $uri/index.html /index.html; root /usr/share/nginx/html; // 前端代码构建后内容存放的目录 # 如果有资源，建议使用 https + http2，配合按需加载可以获得更好的体验 # rewrite ^/(.*)$ https://preview.pro.ant.design/$1 permanent; } location /api { proxy_pass 后端地址; proxy_set_header Host $host; proxy_set_header X-Forwarded-Proto $scheme; proxy_set_header X-Real-IP $remote_addr; } } ``` 检查 nginx 配置是否正确 `nginx -t` 没有报错，重启 nginx（若有问题根据报错信息修改） `nginx -s reload` 或 `systemctl restart nginx` 直接访问服务器 ip 即可（配置 80端口） ## docker nginx 容器方式项目结构 ``` ├── config ├── default.conf.template ├── Dockerfile ├── jest.config.ts ├── jsconfig.json ├── node_modules ├── package.json ├── package-lock.json ├── pnpm-lock.yaml ├── public ├── README.md ├── src └── tsconfig.json ``` nginx 模板文件(文件名 default.conf.template )（docker 环境变量 BACKEND_URL，启动容器时配置即可，方便随时修改） ``` server { listen 80; # gzip config gzip on; gzip_min_length 1k; gzip_comp_level 9; gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; gzip_vary on; gzip_disable "MSIE [1-6]\."; location / { # 用于配合 browserHistory使用 try_files $uri $uri/index.html /index.html; root /usr/share/nginx/html; # 如果有资源，建议使用 https + http2，配合按需加载可以获得更好的体验 # rewrite ^/(.*)$ https://preview.pro.ant.design/$1 permanent; } location /api { proxy_pass ${BACKEND_URL}; # // 配置模板变量 proxy_set_header Host $host; proxy_set_header X-Forwarded-Proto $scheme; proxy_set_header X-Real-IP $remote_addr; } } ``` Dockerfile ``` # date: 2024/9/17 # os: ubuntu 20.0.4 # glibc: Ubuntu GLIBC 2.31-0ubuntu9.16 （与 node 18 有版本要求） # docker hub mirror: aws ecr # docker-ce version: 27.2.1 # 项目ant design pro 6.0.0 需要使用高版本 node ,支持 node 18+ FROM public.ecr.aws/docker/library/node:18.18-alpine AS builder # 创建工作目录 WORKDIR /app # 复制 package.json 和 package-lock.json COPY package*.json . # 安装依赖，建议配置阿里云比较稳定，我这里配置自己的镜像源 # RUN npm config set registry https://registry.npmmirror.com -g RUN npm config set registry http://192.168.1.23:8081/repository/npm_taobo/ -g && npm i --no-cache # 复制项目源码 COPY . . # 构建项目 RUN npm run build # 建议使用 alpine 小 FROM public.ecr.aws/docker/library/nginx:alpine AS production COPY --from=builder /app/dist/ /usr/share/nginx/html/ COPY default.conf.template /etc/nginx/templates/default.conf.template ``` 构建运行命令（建议分步构建） ``` docker build --target builder -t frontend-template-build:0.0.1 . docker build -t frontend-template:0.0.1 . docker run -itd -p 8080:80 -e BACKEND_URL=192.168.1.22:8081 --name frontend-template frontend-template:0.0.1 ``` 部署服务器不建议使用国内的，备案很麻烦。前端已使用 nginx 进行部署地址: http://165.154.55.198 部署方式已经脚本化代码见仓库： https://github.com/wolf-li/web-frontend-templage ### 问题 1. 前端构建后文件放到 nginx 进行部署后（docker 部署没有问题），展示效果与开发时不一样（已解决） <img src="https://pic.code-nav.cn/post_picture/1662265025525547010/q1q1ekyza0eSOWiC.webp" alt="屏幕截图 2024-09-18 161102.png" width="100%" /> <img src="https://pic.code-nav.cn/post_picture/1662265025525547010/uF8zjWDXSyeVIWtf.webp" alt="屏幕截图 2024-09-18 161206.png" width="100%" /> 查看浏览器 F12 开发者控制台发现没有按照样式进行加载，nginx 问题查看nginx 配置配置文件s是否有下面的内容没有添加即可 ``` include mime.types; default_type application/octet-stream; ```

【前端调试专栏（45）】实现 Chrome DevTools 的 Coverage 功能

<html> <head></head> <body> <div class="content ql-editor"> 上节我们把 chrome devtools frontend 跑起来，然后连上自己做的 CDP backend，实现了 network 面板、element 面板的对接，明白了 Chrome DevTools 的运行原理。 那我们能基于已有的 backend，自己实现 frontend 么？ 当然也是可以的。 我们通过命令行的方式把 chrome 跑起来，通过 remote-debugging-port 指定 backend 的端口（这是 mac 下的 chrome 路径，windows 下的话大家自己找一下）： <div class="ql-code-block-container"> <div class="ql-code-block"> /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 </div> </div> 然后我们自己通过 WebSocket 客户端连上就可以了。 当然自己实现 CDP 的交互还是挺麻烦的，chrome 给提供了一个工具包 chrome-remote-interface，内部实现了和 CDP backend 的 WebSocket 通信，我们只需要调用它的 api 即可： <div class="ql-code-block-container"> <div class="ql-code-block"> const CDP = require('chrome-remote-interface'); async function test() { let client; try { client = await CDP({ host: '127.0.0.1', port: 9222 }); const { Page, DOM, Debugger } = client; //... } catch(err) { console.error(err); } } test(); </div> </div> 我们测试一下 DOM 部分的协议： <div class="ql-code-block-container"> <div class="ql-code-block"> const CDP = require('chrome-remote-interface'); const fs = require('fs'); async function test() { let client; try { client = await CDP({ host: '127.0.0.1', port: 9222 }); const { Page, DOM, Debugger } = client; await Page.enable(); await Page.navigate({url: 'https://baidu.com'}); await DOM.enable(); const { root } = await DOM.getDocument({ depth: -1 }); } catch(err) { console.error(err); } } test(); </div> </div> 打个断点，看下 backend 返回的消息： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/zbnv5yf7.jpeg" alt=""> 这就是真实的包含 DOM 信息的 CDP 数据。 接下来我们来实现一个真实的 Chrome DevTools 的功能： Chrome DevTools 有一个覆盖率检测的功能，可以检测 JS、CSS 代码里有哪些执行了，哪些没执行。并且还会在 sources 里标记出来。 如下图，绿色的部分是执行过的，而红色的部分是没执行的： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/uga7oa2g.jpeg" alt=""> 在 sources 面板里可以直接看到哪些代码没执行，比如下面的红色部分就是没有执行的： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/4yxbpy4r.jpeg" alt=""> 这个功能还是很有用的，可以帮助我们分析哪些代码是用不到的，可以进行延后加载或者删掉等优化。 在 More Tools 里开启： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/nkb06y7y.jpeg" alt=""> 使用还是很简单的，但它是怎么实现的呢？ 首先，我们要知道页面下载了哪些 JS 和 CSS。 这个是通过监听事件拿到的， CSS.styleSheetAdded 和 Debugger.scriptParsed 这俩事件。 我们监听下这俩事件： <div class="ql-code-block-container"> <div class="ql-code-block"> const CDP = require('chrome-remote-interface'); async function test() { let client; try { client = await CDP({ host: '127.0.0.1', port: 9222 }); const { Page, DOM, Debugger, Runtime, CSS } = client; await Page.enable(); await Debugger.enable(); await DOM.enable(); await CSS.enable(); CSS.on('styleSheetAdded', async (event) => { debugger; }) Debugger.on('scriptParsed', async (event) => { debugger; }) await Page.navigate({url: 'http://127.0.0.1:8084'}); } catch(err) { console.error(err); } } test(); </div> </div> 因为用到 DOM、CSS、Debugger、Page 域的协议，所以需要先 enable 一下，只有 enable的功能才会启用。 这个很正常，没 enable 就不启用，这样能节省性能。 执行这段代码，看下拿到的事件对象： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/5evex87d.jpeg" alt=""> 事件对象里是这段 js 的 url 和行列号，再就是 scriptId。 然后再看下 CSS.styleSheetAdded 的事件对象： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/rk39ckha.jpeg" alt=""> 也差不多，只不过这里是 styleSheetId。 那怎么拿到 CSS 和 JS 的内容呢？ 这就需要用到别的 api 了。 css 的内容是用 CSS.getStyleSheetText 来拿，传入 styeleSheetId： <div class="ql-code-block-container"> <div class="ql-code-block"> const styleSheetId = event.header.styleSheetId; const content = await CSS.getStyleSheetText({ styleSheetId }); </div> </div> JS 的内容是用 Debugger.getScriptSource 来拿，传入 scriptId： <div class="ql-code-block-container"> <div class="ql-code-block"> const scriptId = event.scriptId; const content = await Debugger.getScriptSource({ scriptId }); </div> </div> 我们把它们按照 id 放到 Map 里： <div class="ql-code-block-container"> <div class="ql-code-block"> const cssMap = new Map(); const jsMap = new Map(); CSS.on('styleSheetAdded', async (event) => { const styleSheetId = event.header.styleSheetId; const content = await CSS.getStyleSheetText({ styleSheetId }); cssMap.set(styleSheetId, { meta: event.header, content: content.text }); }) Debugger.on('scriptParsed', async (event) => { const scriptId = event.scriptId; const content = await Debugger.getScriptSource({ scriptId }); jsMap.set(scriptId, { meta: event, content: content.scriptSource }); }) </div> </div> 这样就能把页面上所有的 js 和 css 收集起来： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/mbqqfn8m.jpeg" alt=""> <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/mpl77r7e.jpeg" alt=""> 对了，测试页面的内容是这样的： <div class="ql-code-block-container"> <div class="ql-code-block"> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="index.css"> <style> a { color: red; } </style> </head> <body> <script> function add(a, b) { return a + b; } function minus(a, b) { return a -b; } function multiply(a, b) { return a * b; } </script> <script> add(1, 3); multiply(3, 4); </script> </body> </html> </div> </div> 有一个外部 css： <div class="ql-code-block-container"> <div class="ql-code-block"> .aaa { color: red; } div { color: blue; } body { background: pink; } </div> </div> 收集到了 JS 和 CSS 的数据只是第一步，要计算出覆盖率数据，还要知道哪些 JS 和 CSS 执行了。 这个也有 api： CSS 开启执行数据的收集是用 CSS.startRuleUsageTracking： <div class="ql-code-block-container"> <div class="ql-code-block"> await CSS.enable(); await CSS.startRuleUsageTracking(); </div> </div> 然后一段时间后 stop： <div class="ql-code-block-container"> <div class="ql-code-block"> // 延迟一段时间再获取数据，等页面渲染完 await new Promise(resolve => setTimeout(resolve, 3000)); const cssCoverage = await CSS.stopRuleUsageTracking(); </div> </div> 这样就能获取 CSS 的执行数据： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/yyubk2rw.jpeg" alt=""> 返回的结果显示 scriptId 为 89607.4 的 css 的 50 到 80 个字符的代码执行了。 我们在 cssMap 里看下这个 id 对应的代码： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/etv1lke4.jpeg" alt=""> 然后取出 50 到 80 个字符的代码： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/t6tj5em2.jpeg" alt=""> 也就是说所有 css 里只有这一段代码是生效的： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/w8ivgfo3.jpeg" alt=""> 你用 Chrome DevTools 的 Coverage 分析结果也是这样的： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/lu0fua4q.jpeg" alt=""> 有了所有 CSS 代码的数据，有了执行了哪些 CSS 的代码的数据，覆盖率的计算不就很简单了么？ 我们再来看下 JS 的： JS 使用 Profiver 的 prociseCoverage 的 api 获取覆盖率数据： <div class="ql-code-block-container"> <div class="ql-code-block"> await Profiler.enable(); await Profiler.startPreciseCoverage(); // 延迟一会再获取数据，等 js 执行完 await new Promise(resolve => setTimeout(resolve, 3000)); const jsCoverage = await Profiler.takePreciseCoverage(); </div> </div> 可以看到返回了两个 script 的执行数据： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/hoywybnj.jpeg" alt=""> 因为我们页面上就两个 script 嘛： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/3xbmsvjj.jpeg" alt=""> 第一个 script 有 4 个 functions： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/wau5f133.jpeg" alt=""> 有同学说，不对呀，不是 add、minus、multiply 3 个吗？ 那个没有名字的代表 script 的匿名代码块。 每个 function 都记录了字符的范围，还有执行的次数： 比如 add 函数执行了 1 次： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/hg8qq1pn.jpeg" alt=""> minus 函数执行了 0 次： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/6tpgdt2o.jpeg" alt=""> 第二个 script 的匿名代码块执行了 1 次： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/rq515254.jpeg" alt=""> 这不就和 Chrome DevTools 的 Coverage 结果对上了么： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/jrhvm9vu.jpeg" alt=""> 不管是覆盖率数据也好，还是在 sources 里可视化展示哪些代码没执行也好，都很容易实现。 全部代码如下，也可以从<a href="https://github.com/QuarkGluonPlasma/fe-debug-exercize" target="_blank">小册仓库</a>里找到。 <div class="ql-code-block-container"> <div class="ql-code-block"> const CDP = require('chrome-remote-interface'); async function test() { let client; try { client = await CDP({ host: '127.0.0.1', port: 9222 }); const { Page, DOM, Debugger, Runtime, CSS, Profiler } = client; await Page.enable(); await Debugger.enable(); await DOM.enable(); await CSS.enable(); await Profiler.enable(); const cssMap = new Map(); const jsMap = new Map(); CSS.on('styleSheetAdded', async (event) => { const styleSheetId = event.header.styleSheetId; const content = await CSS.getStyleSheetText({ styleSheetId }); cssMap.set(styleSheetId, { meta: event.header, content: content.text }); }) Debugger.on('scriptParsed', async (event) => { const scriptId = event.scriptId; const content = await Debugger.getScriptSource({ scriptId }); jsMap.set(scriptId, { meta: event, content: content.scriptSource }); }) await CSS.startRuleUsageTracking(); await Profiler.startPreciseCoverage(); await Page.navigate({url: 'http://127.0.0.1:8084'}); await new Promise(resolve => setTimeout(resolve, 3000)); const cssCoverage = await CSS.stopRuleUsageTracking(); const jsCoverage = await Profiler.takePreciseCoverage(); debugger; } catch(err) { console.error(err); } } test(); </div> </div> 其实 lighthouse 的 cli 就是通过这种方式实现的数据收集和分析： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/3f9lovxl.jpeg" alt=""> 如果某一天，你也要做一个网页分析工具，是不是也可以通过 CDP 的方式来获取一些网页运行数据做分析呢？ 所有 Chrome DevTools 的数据，你通过 CDP 都是能拿到的，能做的事情有很多。 <h2>总结</h2> 可以自己实现 CDP backend，当然也可以实现 frontend，但自己对接 WebSocket 和 CDP 协议还是挺麻烦的，可以直接用 chrome-remote-interface 这个包。 这节我们实现了下 Coverage 功能： Chrome DevTools 有 Coverage 面板，可以分析 JS 和 CSS 代码执行的覆盖率，分析出哪些代码没执行，然后做后续优化。 这是 Chrome 通过 CDP 暴露给 Chrome DevTools 的，而 CDP 的数据我们也能自己实现 ws 客户端来拿到，那自然也可以自己实现覆盖率的计算。 我们通过 chrome-remote-interface 的不同域的 api 来进行了 CSS 和 JS 的代码的收集，代码执行数据的收集，有了这些数据就能轻松算出覆盖率。 lighthouse 的 cli 就是通过这种方式来收集 Chrome 运行时数据，做分析和展示的。如果我们想做一个调试工具，或者网页分析工具，也可以用类似的思路。 Chrome DevTools 能做的所有事情，我们都能自己实现，因为 CDP 数据是一摸一样的。 #前端# </div> </body> </html>

【前端调试专栏（44）】手动对接 CDP 来理解 Chrome DevTools 实现原理

<html> <head></head> <body> <div class="content ql-editor"> 前面学习了 Chrome DevTools 的各种工具的使用，从这节开始深入下它的实现原理。 调试工具都包含 frontend、backend、调试协议、信道这四个部分： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/8jiutsty.jpeg" alt=""> 而在 Chrome DevTools 里这个调试协议就是 Chrome DevTools Protocol，简称 CDP。 打开 <a href="https://chromedevtools.github.io/devtools-protocol/" target="_blank">CDP 的文档</a>，可以看到 CDP 协议分为了不同的 Domain： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/n4jbbs2f.jpeg" alt=""> 比如 DOM、CSS、Debugger 等，这个很容易理解，各种工具的数据通信总不能混到一起吧，所以分成了不同的域来管理。 每个 Domain 下都包含了 Methods 和 Events： <ol> <li data-list="bullet">Method 就是 frontend 向 backend 请求数据，backend 给它返回相应的数据</li> <li data-list="bullet">Event 就是 backend 推送给 frontend 的一些数据。</li> </ol> 你可以在 Chrome DevTools 的设置里开启 Protocol Monitor 面板： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/uh0dfvjm.jpeg" alt=""> 在 More Tools 里打开： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/b2ewibgl.jpeg" alt=""> 然后你就可以看到当前页面所有的 CDP 数据交互： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/cxg9fxdc.jpeg" alt=""> 双向箭头的就是 Method，单向箭头的就是 backend 推给 frontend 的 Event。 你可以在下面的 send a raw CDP method 的输入框里输入协议数据，Chrome DevTools 会把它发给 backend: 比如发送 DOM.getDocument 的 method： <div class="ql-code-block-container"> <div class="ql-code-block"> {"method": "DOM.getDocument","params": {}} </div> </div> 就会返回整个 DOM 的信息： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/mw03mrzg.jpeg" alt=""> 比如发送 CSS.getComputedStyleForNode 的 method，带上某个 nodeId： <div class="ql-code-block-container"> <div class="ql-code-block"> {"method": "CSS.getComputedStyleForNode","params": {"nodeId": 920}} </div> </div> 就可以拿到这个 node 的所有计算后的样式： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/p9td6fzt.jpeg" alt=""> Chrome DevTools 里展示的所有内容都是从 backend 那里拿到的，他只是一个展示和交互的 UI 而已。 这个 UI 是可以换的，比如我们可以用 VSCode Debugger 对接 CDP 调试协议来调试网页。 Chrome DevTools frontend 也是一个独立的项目，我们可以从 npm 仓库下载 chrome-devtools-frontend 的代码，我这里用的是 1.0.672485 版本的： <div class="ql-code-block-container"> <div class="ql-code-block"> npm install chrome-devtools-frontend@1.0.672485 </div> </div> 下载下来的代码有个 front_end 目录，这个就是 Chrome DevTools 的前端代码： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/owjtii5r.jpeg" alt=""> 它下面有几个 html： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/ke0fdfvb.jpeg" alt=""> 我们在 node_modules/chrome-devtools-frontend 下执行 "npx http-server ." 起个静态服务看一下： devtools_app.html 就是网页的那个调试页面： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/qualr26f.jpeg" alt=""> node_app.html 就是 node 的那个调试页面： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/yylra8ry.jpeg" alt=""> 这就是 Chrome DevTools 的 frontend 部分。 那怎么用这个独立的 frontend 呢？ 给它配个 WebSocket 的 backend 就行. 用 node 创建个 WebSocket 服务端，打印下收到的消息： <div class="ql-code-block-container"> <div class="ql-code-block"> const ws = require('ws'); const wss = new ws.Server({ port: 8080 }); wss.on('connection', function connection(ws) { ws.on('message', function message(data) { console.log('received: %s', data); }); }); </div> </div> 在 devtools_app.html 后面加上 ws=localhost:8080 的参数： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/o6zz5xr2.jpeg" alt=""> 启动 ws 服务，你就会发现控制台打印了一系列收到的消息： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/mxgbb0gp.jpeg" alt=""> 这就是 CDP 协议的数据。 那我们对接一下这个协议，返回相应格式的数据，能在 Chrome DevTools 里做显示么？ 我们试一下。 我们找个网络相关的协议： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/x9cte408.jpeg" alt=""> 现在 Protocol Monitor 里看看 NetWork 部分都是怎么通过 CDP 交互的： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/t5hvg5kd.jpeg" alt=""> 然后你会发现每次发请求前，backend 都会给 frontend 传一个 Network.requestWillBeSent 的消息，带上这次请求的信息。 那我们能不能也发一个这样的消息呢？ 我模拟构造了一个类似的 CDP 消息： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/xuc1f8t9.jpeg" alt=""> 然后在 frontend 的页面看一下： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/7lxtallh.jpeg" alt=""> 你会发现 Network 面板显示了我们发过来的消息！ 这就是 Chrome DevTools 的原理。 （代码在<a href="https://github.com/QuarkGluonPlasma/fe-debug-exercize/tree/main/react-source-debug" target="_blank">小册仓库</a>） 测试了下 Network 部分的协议之后，我们再来试下 DOM 的。 我用 Protocol Monitor 观察了下 DOM 部分的 CDP 交互： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/acw1lcaz.jpeg" alt=""> 首先通过 DOM.getDocument 获取 root 的信息，这一级返回的 node 只到 body。 然后后面再发 DOM.requestChildNodes 的消息，服务端会回一个 DOM.setChildNodes 的消息来返回子节点的信息。 我们也这样实现一下： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/cunooio4.jpeg" alt=""> 收到 DOM.getDocument 的消息的时候，我们返回 root 的信息，只到 body 那一级。 然后发送 DOM.setChildNotes 来返回子节点的信息。 还要处理下 DOM.requestChildNodes 的消息，返回空就行。 完整代码如下： <div class="ql-code-block-container"> <div class="ql-code-block"> ws.on('message', function message(data) { console.log('received: %s', data); const message = JSON.parse(data); if (message.method === 'DOM.getDocument') { ws.send(JSON.stringify({ id: message.id, result: { root: { nodeId: 1, backendNodeId: 1, nodeType: 9, nodeName: "#document", localName: "", nodeValue: "", childNodeCount: 2, children: [ { nodeId: 2, parentId: 1, backendNodeId: 2, nodeType: 10, nodeName: "html", localName: "", nodeValue: "", publicId: "", systemId: "" }, { nodeId: 3, parentId: 1, backendNodeId: 3, nodeType: 1, nodeName: "HTML", localName: "html", nodeValue: "", childNodeCount: 2, children: [ { nodeId: 4, parentId: 3, backendNodeId: 4, nodeType: 1, nodeName: "HEAD", localName: "head", nodeValue: "", childNodeCount: 5, attributes: [] }, { nodeId: 5, parentId: 3, backendNodeId: 5, nodeType: 1, nodeName: "BODY", localName: "body", nodeValue: "", childNodeCount: 1, attributes: [] } ], attributes: [ "lang", "en" ], frameId: "3A70524AB6D85341B3B613D81FDC2DDE" } ], documentURL: "http://127.0.0.1:8085/", baseURL: "http://127.0.0.1:8085/", xmlVersion: "", compatibilityMode: "NoQuirksMode" } } })); ws.send(JSON.stringify({ method: "DOM.setChildNodes", params: { nodes: [ { attributes: [ "class", "guang" ], backendNodeId: 6, childNodeCount: 0, children: [ { backendNodeId: 6, localName: "", nodeId: 7, nodeName: "#text", nodeType: 3, nodeValue: "光光光", parentId: 6, } ], localName: "p", nodeId: 6, nodeName: "P", nodeType: 1, nodeValue: "", parentId: 5 } ], parentId: 5 } })); } else if (message.method === 'DOM.requestChildNodes') { ws.send(JSON.stringify({ id: message.id, result: {} })); } }); </div> </div> 返回的内容如上，我们返回了一个 P 标签，有 class 属性，还有一个文本节点。 重启下 backend 服务，在 frontend 里重连一下，你就会发现 frontend 显示了我们返回的 DOM 信息： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/t6hnoiyg.jpeg" alt=""> 经过这两个案例，我们就搞明白了 Chrome DevTools frontend 是怎么和 backend 交互的。 看到自己模拟 DOM 信息这部分，不知道你是否会想到跨端引擎呢。 跨端引擎就是通过前端的技术来描述界面（比如也是通过 DOM），实际上用安卓和 IOS 的原生组件来做渲染。 它的调试工具也是需要显示 DOM 树的信息的，但是因为并不是网页，所以不能直接用 Chrome DevTools。 那如何用 Chrome DevTools 来调试跨端引擎呢？ 看完上面两个案例，相信你就会有答案了。只要对接了 CDP，自己实现一个 backend，把 DOM 树的信息，通过 CDP 的格式传给 frontend 就可以了。 自定义的调试工具基本都是前端部分集成下 Chrome DevTools frontend，后端部分实现下对接 CDP 的 ws 服务来实现的。 比如有很多<a href="https://github.com/ChromeDevTools/awesome-chrome-devtools" target="_blank">用 Chrome DevTools 的backend 调试其他代码的工具</a>： 比如监听系统级别的（包括浏览器之外）的 http 请求，用 chrome devtools 的Network面板展示的工具 <a href="https://github.com/kdzwinel/betwixt" target="_blank">betwixt</a>： 比如用 Chrome DevTools 调试 ios 的网络和数据的工具<a href="https://github.com/square/PonyDebugger" target="_blank">PonyDebugger</a>： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/4jw26p95.jpeg" alt=""> frontend 只是一个对接了 CDP 的独立的客户端 UI，自己实现 CDP 的 backend 就可以用它来调试各种东西。 对前端来说，常见的就是跨端引擎、小程序引擎的调试工具： 小程序引擎的调试工具更简单，因为它实际上渲染是用的网页，有 CDP 的 backend，可以直接和 frontend 对接，不用自己实现 CDP 交互。 比如 vivo 的快应用开发工具，它有编辑器、调试器、模拟器这几部分： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/8v3p3fl5.jpeg" alt=""> 模拟器渲染的内容能够在调试器里调试，就是调试器集成的 frontend 对接了模拟器的 CDP backend。 当然，这里就不是通过 WebSocket 的信道了，而是通过其它方式： Chrome DevTools 支持多种信道： 比如 WebSocket 时的通信实现是这样的： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/i2o537w8.jpeg" alt=""> 而 electron 环境下是这样的： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/dkq9veko.jpeg" alt=""> 嵌入到一个环境的时候是这样的： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/weouvly3.jpeg" alt=""> 而且，像上面那种在一个窗口里渲染，在另一个窗口里调试的这种需求，electron 直接提供了 api 来支持。 <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/g3arjbib.jpeg" alt=""> 使用 setDevToolsWebContents 的 api，就可以让 devtools 的 frontend 显示在任意的窗口里。 所以，小程序的调试工具实现起来还是很简单的，不但 CDP 交互不用自己实现，而且一个窗口渲染，一个窗口显示 Chrome DevTools frontend 这种功能 electron 都已经提供了。 <h2>总结</h2> 这节我们探究了下 Chrome DevTools 的实现原理，它只是一个对接了 CDP 的 UI，完全可以用来调试别的 target，只要实现对应的 CDP backend 即可。 CDP 协议可以在 Protocol Monitor 里看到，分成了多个 Domain，每个 Domain 下有很多 Method 和 Event。 有很多用 Chrome DevTools 调试别的目标的工具，而前端领域的跨端引擎、小程序引擎也是通过这种方式实现的。 跨端引擎要自己实现 CDP 协议的对接，而小程序引擎简单一些，本来就有了 CDP backend，对接到 frontend 即可。 #前端# </div> </body> </html>

【前端调试专栏（43）】线上报错如何直接调试本地源码？

<html> <head></head> <body> <div class="content ql-editor"> 当线上有报错的时候，大家是怎么定位问题的呢？ 断点调试么？ 但是这时候代码是被压缩过的，变量名都是 a、b、c、d 这种，根本看不出啥来。 如果调试线上报错能像本地开发的时候一样就好了。 其实这是可以做到的，这节就分享下如何优雅的调试线上报错： 首先，我们准备一段 JS 代码： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/w4pzyeyf.jpeg" alt=""> 这是我随便找的一段 JS 代码，里面抛了一个错误。 然后用 webpack 进行编译： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/sm1qmt43.jpeg" alt=""> 在 index.html 里引入构建产物： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/s1201sp4.jpeg" alt=""> 然后跑个静态服务器 npx http-server . <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/zb2yokyg.jpeg" alt=""> 浏览器访问，就会发现代码确实报错了： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/083cqb74.jpeg" alt=""> 那问题来了，怎么定位错误原因呢？ 首先，我们可以使用异常断点，在抛异常的地方断住： 创建一个 vscode 调试配置： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/y1og4l7t.jpeg" alt=""> 勾选 uncaught exceptions，在未被捕获的异常处断住： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/lqj693jz.jpeg" alt=""> 然后启动调试： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/eov68nwr.jpeg" alt=""> 你会发现代码在抛异常的地方断住了，这就是异常断点的功能。当你不知道哪里抛的异常的时候，可以用这个。 但现在代码是被压缩过的，看不出啥来： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/nddyeb9r.jpeg" alt=""> 怎么能直接定位到抛异常的源码呢？ 这时候就要用到 sourcemap 了，它就是用于把编译后的源码映射回源码的： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/5r1lvmsj.jpeg" alt=""> <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/dx97dafu.jpeg" alt=""> 首先要生成 sourcemap，这个配置下 webpack 的 devtool 为 hidden-source-map 即可： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/xd3rej59.jpeg" alt=""> hidden-source-map 的意思是生成 sourcemap 但是不关联。 <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/mooig68h.jpeg" alt=""> 如果你配成 source-map，代码是关联了 sourcemap 的： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/fl3ka58l.jpeg" alt=""> 关联 sourcemap 需要在文件末尾加上 //# sourceMappingURL=xxx.js.map 的代码。 但现在这个文件是线上的，不能直接改本地文件。我们可以使用 charles 的断点功能来修改它： charles 默认不代理 127.0.0.1 的请求，我们要配下 hosts： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/nr5wweul.jpeg" alt=""> 比如我配了一个 www.guangtest.com 的域名到 127.0.0.1。 试一下： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/61os8ydd.jpeg" alt=""> hosts 配置生效了（如果 hosts 不生效，一般是你用了某个翻墙软件改了系统代理，关掉即可）： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/cjf4m0l1.jpeg" alt=""> 然后我们要让 charles 拦截这个 url 的请求，需要安装一个插件 SwitchyOmega 不过在那之前要指定一个数据目录，也就是浏览器把插件、历史、cookie 等数据保存在哪里： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/kzlmr9dh.jpeg" alt=""> 不指定的话每次调试都会创建一个临时数据目录来跑调试，上次安装的插件就没有了。 chrome 应用商店搜索 switchy omega： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/i4cbfbd9.jpeg" alt=""> 配置下代理服务器，这里我 charles 是在 127.0.0.1:8888 的： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/2fhv8prc.jpeg" alt=""> 之后配下 auto switch，让 www.guangtest.com 的请求都走我们刚刚配的代理： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/22tsmf0p.jpeg" alt=""> 之后点击应用选项。 代理方式设置成 auto switch，也就是根据配置的规则自动切换代理： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/hqbg0miv.jpeg" alt=""> 这个网页的代理配成 charles 之后，在 charles 就可以抓到对应的请求了： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/1qdcgs0p.jpeg" alt=""> 接下来就是断点修改响应的内容了： 点击 Proxy > Breakpoint Settings <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/7mnjvx5c.jpeg" alt=""> 添加一个对 guangtest.com 的 dist/index.js 响应的断点： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/lguiq32i.jpeg" alt=""> 强制刷下页面，charles 就会断住： 我们可以修改响应的内容，然后点击 execute 来执行修改： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/cgii16rv.jpeg" alt=""> 我加上了这样一行 sourcemap 的关联： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/a2hee4de.jpeg" alt=""> 在 chrome devtools 里可以看到拿到的响应是被修改过的： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/bpn540yu.jpeg" alt=""> 异常断点现在直接在源码处断住了： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/hiq0oauz.jpeg" alt=""> 接下来就可以直接调试源码了，可以通过作用域、调用栈等信息来定位报错原因： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/ytjlwfcx.jpeg" alt=""> 这样我们就完成了直接本地调试线上报错代码对应的源码！ 案例代码在<a href="https://github.com/QuarkGluonPlasma/fe-debug-exercize" target="_blank">小册仓库</a> 有的同学可能会问，前面我们不是学过一个小技巧，sources 面板可以右键点击 add soruce map，就可以手动关联 sourcemap么： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/lcagn1n6.jpeg" alt=""> 没错，那样比较简单，不用 charles 来断点修改文件内容，但那个是一次性的，刷新就没了。 而 charles 断点修改的内容会缓存，强制刷新才会重新请求。 这两种方式都可以。 <h2>总结</h2> 通过 sourcemap，我们可以调试线上报错的时候直接对应到本地源码来断点调试。 要让线上代码关联 sourcemap 可以通过 charles 断点修改对应的响应，加上一行 sourceMappingURL=xxx 的注释。 然后在 VSCode Debugger 里加个异常断点，这样就可以在异常处断住。 这样就可以快速定位线上错误的原因了，体验就和本地开发时一样！ 当然，更快捷的方式是 VSCode Debugger 异常断点断住的时候右键 chrome devtools 的 sources 面板，手动 add source map。不过这种方式是一次性的。 #前端# </div> </body> </html>

【前端调试专栏（42）】Charles 全功能速通（下）

<html> <head></head> <body> <div class="content ql-editor"> 上节学了常用的代理功能，这节我们来学其他的 charles 功能： <h2>DNS Spoofing</h2> 在本地准备一个 index.html，然后 npx http-server . 来跑一个静态服务器： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/wmmy5c01.jpeg" alt=""> 浏览器访问下： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/3r7z8zja.jpeg" alt=""> 执行 sudo vim /etc/hosts 修改 hosts 文件，添加一条 www.guangguangtest.com 到 127.0.0.1 的映射： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/sazn36is.jpeg" alt=""> 之后就可以用这个域名来访问了： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/ahq47b2i.jpeg" alt=""> （如果你把科学上网的工具设置为系统代理，hosts 可能就不生效了，关掉即可） 除了浏览器，在 Terminal 也是可以通过 curl 访问的： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/uolurlg7.jpeg" alt=""> ping 也能 ping 通： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/542in2tg.jpeg" alt=""> charles 也有这个功能，叫做 DNS Spoofing（DNS 欺骗），在 Tools > DNS Spoofing 开启： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/o7ccs48y.jpeg" alt=""> 它的功能和 hosts 类似： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/8rq7m5kq.jpeg" alt=""> 比如我配置了 www.guangguangtest2.com 的域名到 127.0.0.1 的映射，之后就可以浏览器访问这个域名了： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/rtvvzib2.jpeg" alt=""> 但在 Terminal 还不行： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/y1nmjyxx.jpeg" alt=""> 为什么呢？ 因为 DNS Spoofing 生效的前提是走了 charles 代理呀！ 在浏览器里可以通过 SwitchyOmega 的插件切换代理，那命令行里怎么切换呢？ 可以通过设置这个环境变量： <div class="ql-code-block-container"> <div class="ql-code-block"> export https_proxy=http://127.0.0.1:8888 http_proxy=http://127.0.0.1:8888 </div> </div> 设置之后执行 echo $https_proxy 就可以看到它的值： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/qzsgg9op.jpeg" alt=""> 这个端口就是 charles 代理服务的端口，可以在 Proxy > Proxy Settings 里设置： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/0sxj4e8p.jpeg" alt=""> 之后在命令行里的 http、https 请求，也会走 charles 代理： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/rsyusdrd.jpeg" alt=""> curl 可以走代理，但是 ping 不会： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/w9rb4wsu.jpeg" alt=""> 因为 charles 只有 http、https 请求会走 charles 代理，这是和配置 hosts 的区别。 那如果不想用代理了，怎么取消呢？ 通过 unset 去掉这个环境变量即可： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/jtfhj8i5.jpeg" alt=""> 这就是 DNS Spoofing 功能，相比改 hosts 更便捷一些。 <h2>Client Process</h2> charles 可以展示发送 http 请求的 url。 在 Tools > Client Process Settings 开启： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/5176un6n.jpeg" alt=""> 开启之后可以在 notes 看到发送请求的客户端进程： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/rbmeku75.jpeg" alt=""> 这个 google chrome helper 就是网页的一个渲染进程： 在进程管理器里也可以看到： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/b8yy5jrn.jpeg" alt=""> 在终端设置为 charles 代理之后，之后的 http 请求也会被 charles 捕获到： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/h1t2gart.jpeg" alt=""> 这时候也可以看到对应的客户端进程： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/m5effpmx.jpeg" alt=""> 我们主要是调试网页用，所以这个功能倒是用的不多。 <h2>Compose</h2> 能不能用 charles 手动发送请求呢？就像 postman 那样。 可以的，这就是 compose 功能。 点击 Tools > Compose New，创建一个 www.guangguangtest.com:8081 的请求： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/fh3gxdbn.jpeg" alt=""> 然后编辑请求的内容，可以修改 header、body 等： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/zcbd2hgm.jpeg" alt=""> 点击 execute 来发送请求，就可以看到刚才这个请求的响应了： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/kpmwo7j2.jpeg" alt=""> 我们再来构造个 post 请求，修改 header、query、body 等： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/7bdcfi7l.jpeg" alt=""> 点击 execute 就可以看到这个 post 请求了： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/r7ag46fk.jpeg" alt=""> 除了创建新的请求外，也可以直接修改已有的请求，也就是 compose： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/jt6wnguf.jpeg" alt=""> 这里变成钢笔就代表在 compose 中： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/n1kgqmqj.jpeg" alt=""> 修改完点击 execute 就可以发送请求，也可以点击 cancle 来取消 compose。 <h2>Repeat</h2> 可以 Tools > Repeat 或者右键请求然后点 Repeat 来重发请求： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/dfnw2fid.jpeg" alt=""> 如果想重发 n 次呢？这可以用高级 repeat 功能。 在 Tools > Advanced Repeat 里开启： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/u3nzyj2r.jpeg" alt=""> 比如重复 10 次、两个并发，重复间隔为 1000ms，在新的 session 里展示结果。 效果是这样的： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/0eoaryp9.jpeg" alt=""> 可以用来测试接口。 <h2>Throttle</h2> 这个是模拟慢速的请求用的，点击这个乌龟的图标开启： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/k1qjxxls.jpeg" alt=""> 或者在 Proxy > Start Throttling 开启。 当然，一般我们只需要对某些域名开启 throttle，可以在 Proxy > Throttle Settings 里设置： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/mu2g2h27.jpeg" alt=""> 下面可以做更详细的速率设置。 <h2>Web Interface</h2> charles 也支持通过 web 网页来控制，在 Proxy > Web Interface Settings 里开启： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/iz8rii9i.jpeg" alt=""> 可以支持匿名访问，也可以设置用户名和密码访问。 这这里可以做一些功能的开启和关闭： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/o0g5ei18.jpeg" alt=""> <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/qnton1eo.jpeg" alt=""> 有同学说，不是已经有客户端了么？ 本地确实没啥必要用这个，但是远程控制的时候，就可以通过 web interface 了。 <h2>Focused Hosts</h2> charles 默认展示全部的 url： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/f4l5x2vl.jpeg" alt=""> 我们想找 juejin.cn 的请求的话可以过滤： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/x2muq7pz.jpeg" alt=""> 也可以通过 View > Focused Hosts 来设置关注的域名： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/98wph8ho.jpeg" alt=""> 这样 charles 就会把其他的域名的请求折叠起来： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/wykcbdsm.jpeg" alt=""> 也可以在请求上右键开启： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/o7a0t1g3.jpeg" alt=""> <h2>Highlight Rules</h2> 还可以给不同的 url 指定不同的颜色。 在 View > Highlight Rules 开启： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/td7ur1sa.jpeg" alt=""> 效果如下： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/m5djgtq2.jpeg" alt=""> 更有用的是可以根据条件来高亮，比如我设置所有 Set-Cookie 的 header 不为空的响应都设置黄色。 <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/xfucxu0j.jpeg" alt=""> <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/mqztr59e.jpeg" alt=""> 这样所有响应有 Set-Cookie 的 header 的请求都高亮了： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/g8se9v19.jpeg" alt=""> 和 Chrome DevTools 里的 has-response-header 过滤器类似： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/3du7qo6x.jpeg" alt=""> 但是这个可以过滤的更多。 <h2>find</h2> find 是搜索功能，可以在 session、选择的 url 或者某个 url 的请求里搜索。 在 Edit > Find 里开启： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/hux7ncrc.jpeg" alt=""> 比如我选中 juejin.cn，然后在里面搜索 guang： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/11gj2u5y.jpeg" alt=""> 右键有个 find in 功能，这个就是在某个 path 内搜索： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/3bucpi33.jpeg" alt=""> 还可以指定搜索 url/header/body。 <h2>External Proxy</h2> 访问国外的网站需要科学上网，会起一个代理服务器，charles 抓包也要跑一个代理服务器。 但是我们网页只能指定代理服务器，那如何同时又能科学上网，又能 charles 抓包呢？ 这就是 External Proxy 的功能了： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/vb3osb7u.jpeg" alt=""> 可以在 Proxy > External Proxy Settings 设置转发的代理服务器，这样 charles 抓包之后会再转发给别的代理服务器。 还可以在 bypass 里设置白名单，这些 url 不走别的代理服务器。 <h2>总结</h2> 这节我们过了一遍 charles 的其他的功能： <ol> <li data-list="bullet">DNS Spoofing：DNS 欺骗，类似 hosts，但是只影响 http 和 https</li> <li data-list="bullet">Client Process：展示发请求的进程名</li> <li data-list="bullet">Compose：compose new 创建一个新的请求，compose 修改已有的请求</li> <li data-list="bullet">Repeat：重发请求，可以设置重发次数、并发数、重发间隔</li> <li data-list="bullet">Throttle：模拟慢速请求，可以做具体的速率设置</li> <li data-list="bullet">Focus：只展示关注的 hosts 的请求，其余的折叠</li> <li data-list="bullet">Highlight Rules：根据规则来高亮请求，使用不同的颜色</li> <li data-list="bullet">Web Interface：通过 web 界面来控制一些功能的开启关闭，这适用于远程控制</li> <li data-list="bullet">Find：在 session、path 等范围内根据关键词搜索</li> <li data-list="bullet">External Proxy：charles 可以把请求转发给别的代理服务器，比如科学上网的</li> </ol> 在调试网络请求的时候，这些都是挺有用的功能。 #前端# </div> </body> </html>

【前端调试专栏（41）】Charles 全功能速通（上）

<html> <head></head> <body> <div class="content ql-editor"> Charles 做为主流的代理工具，有很多强大好用的功能，这两节我们就快速过一遍： <h2>charles 代理的两种配置方式</h2> 网页默认是走系统代理。 可以把 Charles 也设置为系统代理，点击 Proxy > macOS Proxy 即可： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/hwvlbitu.jpeg" alt=""> 这样就能抓到网页的数据包了。 <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/8rikc91h.jpeg" alt=""> 或者不把 charles 设置为系统代理，而是 SwitchyOmega 单独指定网页的代理服务为 charles： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/trvfd8lj.jpeg" alt=""> 这里的代理服务的端口可以在 Proxy > proxy Settings 里看到： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/w6vh46s9.jpeg" alt=""> 当然，更好的方式是 auto switch，也就是根据条件自动切换。 也就是我们在选项里配置的情景模式： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/hvrakat4.jpeg" alt=""> 这两种还是很容易理解的： <ol> <li data-list="bullet">默认都是走系统代理，所以把 charles 配置为系统代理服务器就可以抓包了</li> <li data-list="bullet">网页也可以通过 SwitchyOmega 单独指定代理服务器，这时候请求会直接走 charles</li> </ol> <h2>no caching</h2> 可以让 http 请求禁用缓存，在 Tools > No Caching 里开启： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/zlifwqed.jpeg" alt=""> 当开启之后，你会发现 header 会带上 cache-control: no-cache： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/fxtwtfmc.jpeg" alt=""> no-cache 的意思是会用本地的缓存，但每次都协商。 而不开启的时候，header 里没有这个： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/4v363vh9.jpeg" alt=""> 这就是禁用缓存的实现原理。 其实浏览器的强制刷新也是这么实现的，你可以强刷一下，抓包看看 header。 除了全部请求禁用缓存外，还可以单独指定某些 url 禁用缓存： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/q71wmmfo.jpeg" alt=""> <h2>block cookies</h2> 这个也很容易理解，就是禁用 cookie 和 set-cookie 的 header： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/zzfmugoc.jpeg" alt=""> 在 Chrome DevTools 的 Network 里开启这两个 header 的展示： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/i4qpq0yh.jpeg" alt=""> 在开启 block cookies 之前，是有请求携带或设置 cookie 的： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/zxl4sb2k.jpeg" alt=""> 开启 block cookies 之后，你会发现所有的 set-cookie 都没有了： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/hzewyp5w.jpeg" alt=""> 但请求还是会带上 cookie，这是因为还没到 charles 那层。 同样的请求，到 charles 看下，就会发现没有 cookie 了： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/v2vc1xfg.jpeg" alt=""> 关闭 block cookies 之后又有了： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/o0c3hi0o.jpeg" alt=""> 同样，它也可以单独 block 某些 url： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/mabvxoaq.jpeg" alt=""> <h2>map remote</h2> charles 可以把请求转发给另一个 url，用 Tools > map remote 的功能： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/ec3nq4qf.jpeg" alt=""> 比如把 https://juejin.cn 转发到 https://www.baidu.com <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/gz1ikpl5.jpeg" alt=""> 除了在 Tools > map remote 里开启之外，也可以右键 url 来开启： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/xwamwvaw.jpeg" alt=""> 好处是请求信息不用自己填一遍了： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/tut4sd37.jpeg" alt=""> 之后也可以在 Tools > map remote 里管理： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/n4uifvaa.jpeg" alt=""> <h2>map local</h2> 可以把请求转发给另一个 url，也同样可以读取本地的文件内容作为响应，也就是 map local。 在 Tools > map local 里，或者右键请求都可以设置： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/0bv5gfdh.jpeg" alt=""> <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/cpe93zn6.jpeg" alt=""> 比如把这个 json 文件的请求换成本地的一个 svg 文件： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/sd1nbgwy.jpeg" alt=""> map 之前是这样： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/dn7r91j3.jpeg" alt=""> map 之后就是这样了： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/a77rv5mh.jpeg" alt=""> map local 功能在移动端开发的时候还是挺常用的，比如把请求的 js、css 等换成本地刚打包出来的，就可以在线上环境调试本地代码。 <h2>Mirror</h2> mirror 可以把响应内容保存在本地： 在 Tools > Mirror 里开启 mirror 功能： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/ellbdpuk.jpeg" alt=""> 指定保存的位置，之后再访问 url，就会把响应内容保存下来： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/a2219tcp.jpeg" alt=""> 当然，我们没必要全部保存，也可以开启只 mirror 选择的 url，然后指定 url： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/gc8iv4na.jpeg" alt=""> 之后在保存的目录下就可以看到该请求的响应数据的文件： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/amkhzzxc.jpeg" alt=""> 但是这个内容是不能修改的，每次刷新都会覆盖，这也是 mirror 镜像的含义。 但是可以配合 map local 使用，比如把这个响应保存下来，然后再复制到别的地方修改之后再 map local。 <h2>rewrite</h2> 除了转发请求外，自然也支持对请求做修改，也就是 rewrite 功能。 在 Tools > rewrite 里开启： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/8iwpdtdl.jpeg" alt=""> 支持修改的包括 header、host、path、url、query，response status、body，也就是所有的内容都可以改： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/tsyrmecz.jpeg" alt=""> 比如我添加一个 query param： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/fbmsbvyt.jpeg" alt=""> 效果如下： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/sqv6ilao.jpeg" alt=""> 这里操作的时候，如果希望 charles 一直在最上面，可以在 charles > preferences 里开启 always on top： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/cqmpb2hj.jpeg" alt=""> 它就一直在上面了： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/vl8hbrjh.jpeg" alt=""> <h2>block list</h2> bloack list 可以禁止一些 url 的请求： 在 Tools > block list 里： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/nzazptkt.jpeg" alt=""> 处理方式可以是断开连接或者返回 403。 当然，也可以右键请求来把它加入到 block list： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/zsxllj6e.jpeg" alt=""> 比如当设置 block 的 url 的时候： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/euvztyem.jpeg" alt=""> 效果是这样的： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/4v1asry3.jpeg" alt=""> 当你需要模拟请求失败的时候，可以用这个功能。 <h2>allow list</h2> allow list 和 block list 正好反过来，这个是只允许列表中的 url 的请求： 比如当设置了 allow list 的时候： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/5xvs196f.jpeg" alt=""> 所有不在列表中的请求都会失败，可以通过 status-code:0 的过滤器过滤出来： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/cd93b01q.jpeg" alt=""> <h2>ssl proxying</h2> https 的代理是很常用的，这个我们上节讲过，需要安装证书到系统。 默认抓取到的 https 的数据是加密过的： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/rnyoeurz.jpeg" alt=""> 因为 https 会用证书里的公钥加密请求，用私钥加密响应数据： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/6qanqsza.jpeg" alt=""> 想要抓取明文数据，需要把证书换成 charles 的： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/wq58cakx.jpeg" alt=""> 首先，在 Proxy > SSL Proxying Settings 里开启这个功能： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/w0nz6kc1.jpeg" alt=""> 然后点击 help > SSL Proxying > Install Charles Root Certificate，把 charles 证书安装到系统的钥匙串中并信任： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/xwybgjdc.jpeg" alt=""> 这样证书就换成了 charles 的并被标记为信任： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/f5agbjz3.jpeg" alt=""> 也就能抓到明文数据了： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/7f1eeloa.jpeg" alt=""> <h2>breakpoints</h2> 断点同样是很常用的功能，这个上节也讲过。 在 Proxy > Enable breakpoints 开启这个功能： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/6nocd90t.jpeg" alt=""> 然后在 Proxy > Breakpoint Settings 里配置： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/tv3g3em3.jpeg" alt=""> 可以单独开启请求/响应的断点： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/h4uqz3bm.jpeg" alt=""> 或者右键请求来设置： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/vxh7z7ex.jpeg" alt=""> 再发送请求的时候或响应的时候就会断住： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/s4i1k8js.jpeg" alt=""> 可以修改各种内容： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/aglgxll9.jpeg" alt=""> 然后 execute 即可。 <h2>总结</h2> 这节我们过了 charles 一些常用的功能： 首先设置代理可以用 SwitchyOmega 单独指定网页的代理服务器为 charles，也可以直接把 charles 设置为系统代理。 然后我们学习了常用的 charles 代理功能： <ol> <li data-list="bullet">no caching：禁用缓存</li> <li data-list="bullet">block cookies：禁用 cookie</li> <li data-list="bullet">map remote：转发请求到另一个 url</li> <li data-list="bullet">map local：用本地的文件作为该请求的响应内容</li> <li data-list="bullet">mirror：把响应保存在本地文件</li> <li data-list="bullet">rewrite：重写请求或响应的各种数据</li> <li data-list="bullet">block list：禁止一些 url 的请求</li> <li data-list="bullet">allow list：只允许一些 url 的请求</li> <li data-list="bullet">SSL Proxying：代理 https 请求，用 charles 自己的证书，需要安装 charles 证书到系统并信任</li> <li data-list="bullet">breakpoints：断点修改请求/响应</li> </ol> 这些功能中有重合的部分，比如可以通过 rewrite 实现 no caching 的功能，也就是修改 cache-control 的 header，比如 rewrite 的功能和 breakpoint 的功能很类似，但不同的场景下直接用对应的功能会更方便。 这些是比较常用的 charles 代理功能了，下节我们继续学习其余的功能。 #前端# </div> </body> </html>

【前端调试专栏（40）】如何用 Charles 断点调试 https 请求？

<html> <head></head> <body> <div class="content ql-editor"> 现在的网站基本都是 https 的，而 charles 是常用的 http 抓包工具，所以用 charles 调试 https 请求是常见的需求。 这节就来讲下如何用 charles 调试 https 请求，如何断点调试。 首先安装 charles，点击 start recording： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/30t20m6z.jpeg" alt=""> 浏览器访问一些页面，这时候左侧就会展示出抓到的 http/https 请求： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/cxnk4c46.jpeg" alt=""> 但是这时候抓到的是加密过后的内容，这是 https 的机制导致的： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/2m98mk9k.jpeg" alt=""> 服务端会下发被 CA 认证过的证书，里面包含了公钥，而服务器自己保留私钥，通过这种机制完成对称密钥的传输和身份的认证，之后加密传输数据。 中间人拿到的数据自然都是被加密过的，也就是上图的那些乱码： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/6yhnvinq.jpeg" alt=""> 那抓包工具怎么能拿到明文的数据呢？ 自己用服务端的证书和服务端对接不就行了？ 也就是这样： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/0q7l4zko.jpeg" alt=""> Charles 自己用服务端的证书来和服务端通信，然后给浏览器一个自己的证书，这样就能解密传输的内容，拿到明文数据了。 点击 Proxy 的 SSL Proxy Setting： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/a8g46mx5.jpeg" alt=""> 添加一条对 juejin 的 https 代理： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/ggy3l4c7.jpeg" alt=""> 这是 juejin 之前的证书： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/h0ixt3dz.jpeg" alt=""> 代理之后就换成了 Charles 的证书，但是会提示不安全： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/xkhgtpze.jpeg" alt=""> <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/8wi6zzuk.jpeg" alt=""> 这是因为系统有一个存放所有根证书的地方，要那里存在并且被信任的证书才是安全的。 点击 help > SSL Proxying > Install Charles Root Certificate，安装到系统的钥匙串中： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/6bc9edkv.jpeg" alt=""> 改为始终信任： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/0qvw4dcr.jpeg" alt=""> 这时候浏览器里就会标记安全了： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/y1h9q9yr.jpeg" alt=""> 并且在 charles 里就会看到明文的 https 请求和响应内容： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/781124wb.jpeg" alt=""> 这个过程的原理就是这张图： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/wl7iaf7p.jpeg" alt=""> 现在能够抓 https 包了，但是还不够，现在只能看，很多情况下我们是希望能修改一下请求和响应内容的，这时候就要用断点功能了： 右键请求，勾选 breakpoints： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/gn9zi57i.jpeg" alt=""> 然后开启断点： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/hzhfd4id.jpeg" alt=""> 刷新页面你会发现它断住了： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/h4fttgsy.jpeg" alt=""> 下面三个按钮分别是取消、终止、执行修改后的请求的意思。 上面可以改 url，添加 header，还可以改请求内容和 cookie： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/afpk16ff.jpeg" alt=""> 点击 execute 之后就会发送请求。 之后响应的时候还会断住，这时候就可以用同样的方式修改响应了： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/doin8epf.jpeg" alt=""> 比如我把 title 修改了一下，点击 execute 之后，看到的网页就是修改过后的： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/q5q2q5el.jpeg" alt=""> 这样我们就可以断点调试 https 请求了。 为什么可以实现断点功能呢？ 这个很容易想明白，怎么请求、怎么响应都是 Charles 控制的，那想实现一个断点和编辑的功能，岂不是很容易么？ 有的同学可能会问，移动端怎么调试呢？ 其实是一样的，只不过移动端也要把 Charles 证书安装到自己的系统中，需要点击安装 charles 证书到移动设备： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/q10j9bxd.jpeg" alt=""> 他会提示你在手机设置代理服务器，然后下载 Charles 证书： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/gpr0o2pp.jpeg" alt=""> 原理和我们在 PC 端下载 Charles 证书是一样的，后续流程也一样。 除此以外，chrome 还有一个浏览器插件可以更细粒度的控制代理，叫做 SwitchyOmega： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/rpq24ifo.jpeg" alt=""> 你可以配置若干个代理服务器，比如 charles 的代理服务器： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/rzc9h0q3.jpeg" alt=""> 这个可以在 Charles 的 Proxy > Proxy Setting 里配置： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/hxo0czdz.jpeg" alt=""> 然后就可以配置什么 url 用什么代理，或者不用代理直接连接： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/l1jqtwbh.jpeg" alt=""> 当你有多个代理服务器，或者想控制有的页面走代理有的不走的时候，就可以用这个插件来控制了。 要让你配置的规则生效，这里要选择 auto switch，也就是根据规则自动切换： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/u6n81gvw.jpeg" alt=""> 这几个选项的意思分别是： <ol> <li data-list="bullet">直接连接：不走代理</li> <li data-list="bullet">系统代理：用系统级别的代理配置</li> <li data-list="bullet">proxy：这个是我们配置的那个代理服务器，可以指定网页走这个代理</li> <li data-list="bullet">auto switch：根据规则自动切换代理</li> </ol> 也可以为这个 url 单独设置代理方式： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/nqzpbm3n.jpeg" alt=""> <h2>总结</h2> 用 Charles 调试 https 请求是常见的需求，它需要安装 Charles 的证书到本地系统，然后信任，之后就可以抓到明文数据了。 原理就是 Charles 会使用服务器的证书来和服务器通信，然后发一个自己的证书给浏览器。 Charles 还有断点调试功能，可以修改请求和响应的数据。 移动端 https 调试也是同样的原理，只不过需要配置下代理和证书。 如果想切换代理服务器或者设置有的页面不走代理，可以用 Chrome 插件 SwitchyOmega 来控制。 会断点调试 https 请求还是很有意义的，比如改改 header、改改 body，看看会有啥效果，使用场景有很多。 #前端# </div> </body> </html>

【前端调试专栏（39）】远程调试移动端网页的原理

<html> <head></head> <body> <div class="content ql-editor"> 前两节我们学习了用 chrome 远程调试安卓移动端网页，用 safari 远程调试 ios 移动端网页： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/rz6abnrl.jpeg" alt=""> <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/dcuovqus.jpeg" alt=""> 那他们是怎么实现呢？ 首先，我们知道调试是 client server 的架构，比如 chrome 会使用 CDP 协议来传输数据。 <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/liqy0eor.jpeg" alt=""> 传递的 CDP 数据可以通过 Protocol monitor 看到： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/w1wztnmv.jpeg" alt=""> pc 端是这样，移动端也是这样，只不过传递协议数据的方式不大一样。 要想起一个有 CDP server 的浏览器，需要单独指定一些参数。 pc 端是跑 chrome 的时候带上 remote-debugging-port 参数，类似这样： <div class="ql-code-block-container"> <div class="ql-code-block"> /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 </div> </div> 然后就可以连上这个端口进行调试了，不管你是用 chrome devtools 还是 vscode debugger 或者其余的 frontend UI。 那移动端呢？ 自然也是一样的，要开启调试模式才有这个 CDP Server 可以连接。 andorid 的 app 里面的 weview 需要类似这样的方式开启调试： <div class="ql-code-block-container"> <div class="ql-code-block"> // Android 4.4 以上 WebView 才真正使用 Blink 内核，所以需要在此版本及以上系统。 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { WebView.setWebContentsDebuggingEnabled(true); } </div> </div> 所以你想调试 app 里网页的话，让移动端开发给你一个调试包即可。 有了 CDP Server 的标志就是你访问 9229 端口的 /json 是可以看到所有页面的 websocket 地址的： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/se2sn4ra.jpeg" alt=""> 每个页面就可以连接对应的 ws 服务端来进行 CDP 协议数据的交换，实现调试。 那问题来了，pc 端怎么访问移动端的页面呢？ 有两种方式，第一种是通过 USB，连上 USB 之后就可以使用 android 的 adb 工具来转发端口： <div class="ql-code-block-container"> <div class="ql-code-block"> adb forward tcp:9229 </div> </div> 之后就可以进行通信，自然也就可以调试了。 <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/a6y614ka.jpeg" alt=""> ios 下也有类似的工具。 当然，也可以通过 wifi 的方式，只不过这种就需要单独起一个 ws 服务做转发了。 <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/ldpl6ixn.jpeg" alt=""> 这个 ws 服务做的事情比较简单，就是原封不动转发了下 CDP 数据。 这样就能实现 wifi 调试，扫码调试等功能。 这就是远程调试移动端网页的原理。 最后，android 这个实时看到移动端网页的界面是怎么实现的呢？ <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/2julh88j.jpeg" alt=""> 其实就是一帧帧截图实现的。 CDP 协议里有这样一个传输 base64 的截图数据的事件： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/pgosg8o3.jpeg" alt=""> <h2>总结</h2> 我们可以通过 chrome、safari 调试移动端的网页，原理就是开启调试模式之后，可以通过 CDP server 和 client 进行通信，从而实现调试。 pc 端开启调试只要指定 remote-debugging-port 的启动参数即可，而移动端则需要指定 webview 的参数。 可以通过 USB 调试，是因为 adb 做了端口转发，也可以通过 wifi 调试，这种就需要自己实现一个 ws 服务做中转了。 理解了远程调试的原理，当你再用各种移动端网页调试工具、小程序调试工具、跨端调试工具等，心里就有底了。 #前端# </div> </body> </html>

【前端调试专栏（38）】如何远程调试 ios 移动端网页

<html> <head></head> <body> <div class="content ql-editor"> 上节学会了用 Chrome 远程调试 Android 网页，这节来调试下 iOS 网页。 ios 网页调试只能用 safari 浏览器。 打开偏好设置 > 高级，勾选显示“开发”菜单： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/v76k99ij.jpeg" alt=""> 之后就会出现“开发”菜单，下面会展示所有连接的设备： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/usu8115m.jpeg" alt=""> 它会提示你在 iPhone 上启用网页检查器。 这个是在设置 > safari 浏览器 > 高级里开启的： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/38dmca8a.jpeg" alt=""> 网页检查器下面也有这么一行提示： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/00752coy.jpeg" alt=""> 之后在 Safari 浏览器里打开一个页面，比如 baidu.com： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/a2g9s8mj.jpeg" alt=""> 在电脑的 Safari 浏览器的开发菜单里就会显示出这个网页： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/btv89j8t.jpeg" alt=""> 不只是 Safari 浏览器，一些 APP 里内嵌的网页开启了调试的话也可以连接。 之后就可以在电脑上远程调试 iphone 上的网页了： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/7pbey65v.jpeg" alt=""> <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/sibub31l.jpeg" alt=""> 可以调试网络请求： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/8dxar6vs.jpeg" alt=""> 可以断点调试： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/zdrqhd7e.jpeg" alt=""> 比如可以在所有未捕获的异常处断住，这是异常断点。 可以在请求某个 URL 的时候断住，这是 URL 断点： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/ncxuody5.jpeg" alt=""> <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/aqjbwpmu.jpeg" alt=""> 可以添加事件断点： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/lc6zac9d.jpeg" alt=""> <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/ugwqa61p.jpeg" alt=""> 还可以在 requestAnimationFrame、setInterval 的回调处断住。 而且在 Chrome DevTools 里的 DOM 断点，这里也同样支持： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/17uuc3r5.jpeg" alt=""> 也就是元素子树修改、属性修改、节点移除的时候断住。 而且也可以分析网页的图层： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/ar3c8c7n.jpeg" alt=""> 基本所有的网页调试功能都支持。 <h2>总结</h2> 调试 iphone 上的网页要用 Safari 浏览器，支持各种断点、支持元素审查、网络请求的调试等等各种功能。 当你需要调试 ios 的网页的时候，不管是 safari 打开的网页，还是 APP 里内嵌的网页，都可以用这种方式来调试。 #前端# </div> </body> </html>

【前端调试专栏（37）】如何远程调试 android 移动端网页

<html> <head></head> <body> <div class="content ql-editor"> 作为前端开发，我们每天都会用 Chrome DevTools 调试 Chrome 的网页，但其实它还可以远程调试安卓手机的网页。 那 Chrome DevTools 如何远程调试安卓网页呢？它的实现原理是什么？ 今天我们就来了解一下： <h2>远程调试安卓网页</h2> 用数据线把安卓手机和电脑连接起来，在手机设置里打开 USB 调试： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/6rfz2h5c.jpeg" alt=""> 然后在 chrome 打开 chrome://inspect 页面，勾选 Discover USB devices（默认是勾选的）： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/ecakzggs.jpeg" alt=""> 这时候下面就会出现一个提示：请在设备上接受 debugging 会话 <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/hrz26m9v.jpeg" alt=""> 在手机上点击确定，就会建立调试会话： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/3cpo3e4u.jpeg" alt=""> 下面就会列出所有可以调试的网页： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/vd4diu4u.jpeg" alt=""> 浏览器里的网页，或者 APP 调试包的 webview 的网页都会列出来。 点击 inspect 就可以调试了： 可以审查元素： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/ko3109pd.jpeg" alt=""> 可以打断点： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/x94qvxop.jpeg" alt=""> 也可以用 Performance 分析性能： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/i75xexzt.jpeg" alt=""> 各种调试 PC 网页的功能基本都支持。这样就可以愉快的调试安卓的移动端网页了。 不过这个过程你可能会遇到这样的问题，打开的窗口是空白的或者是 404: <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/eq2jw4qz.jpeg" alt=""> <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/fxld0dxz.jpeg" alt=""> 这是因为调试的目标可能是任意 chrome 版本，那么 Chrome DevTools 自然也要用相应的版本才行，所以就需要动态下载。 而动态下载的 devtools 网页是在 google 域名下的，需要科学上网才行。 科学上网之后，就可以正常的下载 Chrome DevTools 来做调试，也就不会白屏或 404 了。 但也不是每次都要科学上网，一个调试目标只需要下载一次 Chrome DevTools 的代码，之后就可以一直用了。 我们了解了 Chrome DevTools 怎么调试安卓的网页，那它的原理是什么呢？ <h2>Chrome DevTools 的原理</h2> Chrome DevTools 被设计成了和 Chrome 分离的架构，两者之间通过 WebSocket 通信，设计了专门的通信协议： Chrome DevTools Protocol。 <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/afe680ow.jpeg" alt=""> 这样只要实现对接 CDP 协议的 ws 服务端，就可以用 Chrome DevTools 来调试，所以 Chrome DevTools 可以用来调试浏览器的网页、调试 Node.js，调试 Electron 等。 那自然也就可以远程调试安卓手机的网页了，只要开启了 USB 调试，那手机和电脑就可以做网络通信，从而实现基于 CDP 的调试。 这个 CDP 的调试协议是 json 格式的，如果想看它传输了什么也是可以的： 在 Chrome DevTools 的设置里开启 Protocol Monitor： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/olfqt8bf.jpeg" alt=""> 然后在 more tools 里打开 Protocol Monitor 面板： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/abou7sbc.jpeg" alt=""> 然后你就可以在 Protocol Monitor 面板里看到所有的 CDP 协议的数据交互了： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/8e4m984o.jpeg" alt=""> 这就是调试的实现原理。 那如何知道哪些界面是网页，哪些是原生绘制的呢？ Android 下可以在设置里打开显示布局边界： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/s2b32ljr.jpeg" alt=""> 如果是原生的组件，就会显示边框： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/b5178unc.jpeg" alt=""> 而没有边框的，就是网页。比如钉钉的这个界面： <img src="https://pic.code-nav.cn/planet_post_image/1797461877294809089/zoi78ah8.jpeg" alt=""> <h2>总结</h2> Chrome DevTools 和 Chrome 是分离的架构，两者通过 WebSocket 通信，通信协议是 Chrome DevTools Protocol，可以在 Protocol Monitor 里看到 CDP 的数据交互。 因为这样的实现原理，Chrome DevTools 可以调试很多目标，其中就包括 USB 设备。 打开 USB 调试之后，在 chrome://inspect 页面就可以看到可调试的网页了，点击对应的网页就可以调试。 要注意的是调试的目标浏览器要和用的 Chrome DevTools 版本一一对应才行，所以第一次调试会先下载 Chrome DevTools，这需要访问 google 的域名，如果没有科学上网，会有白屏和 404 的问题。 理解了调试的原理，Chrome DevTools 调试安卓网页的流程，就可以愉快的远程调试安卓手机的网页了。 #前端# </div> </body> </html>