2025.09.23 Google 官方发布了 Chrome DevTools MCP，目前版本号还是 0.9.0，Google 官方对它的定位是协助 AI coding assistants 做调试和性能测试，提高网页编程的 debug 能力，一些使用案例可见官方 blog：Chrome DevTools (MCP) for your AI agent。

本文主要是结合 源码 和 MCP output 内容，分析 chrome-devtools-mcp 的运行原理，探索它的能力边界。

大家好啊，blog 一年多不更新了，估计权重都掉完了，也不知道最后有多少人能看到。

从去年五月份开始，工作上因组织架构变动，我从原来做的性能优化领域转向了 AI，具体内容因为保密协议的问题也不能多说，所以就长时间不更新了。今年的话工作方向又有了一些变动，主要是在做一些 GUI Agent 的事情。

时间过去了一年，但对于编程领域却是天翻地覆。随着 Cursor/Claude Code 等工具的推出，大家基本都脱离了古法编程的束缚（先别说生成的代码对不对，你就说快不快吧）；不少的部门也不满足于外部编程工具的提效，也开始搞自己内部的 Agent，试图在业务和工程上双重提效。由于最近的工作会和大模型团队合作比较多，我对此的体感反而感受更深一些，这里面的感触以后有机会可以和大家慢慢说。

大家好，我是专注于做性能优化的卤代烃。

做网页相关的性能优化时，需要对浏览器的底层原理有一定的了解，这样才能更好的让页面走在 happy path 上。今天我们就了解一个很少被人所知的浏览器默认性能优化方案 —— HTML Preload Scanner，看看它是如何优化网络资源加载速度的。

前言​

浏览器的 Devtools 工具有多种观测 network 性能数据的方式，但是这些数据的表现方式各有不同。本文就是解读一下这些性能数据的表现方式，并做纵向比较，帮助更多的人去优化网络带来的性能问题。

前言​

由于 Web 的开放特性，同样是糊页面，Web 前端工程师往往要和 CORS（跨域请求）做一些斗争，例如我之前遇到的一个 《SVG 图片字体失效问题》 就是 CORS 引起的。

一个网页除了可以运行在公共的浏览器上，也可以运行在 APP 端内的 WebView 组件上。由于这些 Hybrid Web 网页运行在一个相对封闭的环境里，所以 APP 本身可以向 WebView 中注入一些 JS 代码，对 Web 页面做定向增强（最典型的运用就是 JSBridge，提供了一道 Web <--> Native 通信的桥梁）。

英文版本：How to Locate the JS Code Injected into Hybrid Web Pages by Native

前两天在「即刻」上一时兴起写了一段 HTTP 优先级的发展历程，这两天觉得当时写的还是太仓促了，所以准备写个 Blog 扩写一下，就「优先级」这个概念纵向分析，看看这些基础协议的发展和进化。

吐槽时间​

不知道从什么时候开始，前端开始卷一些 “高端知识”，动不动就浏览器底层原理，V8 是如何运行的，倒不是说这些没啥用，只是来势汹汹好像不懂这些就不能糊页面一样。

我工作中和内核团队与虚拟机团队也合作过并咨询过他们这些相关问题，大家的态度也很明确，面对这种千万行代码的大型工程项目，他们作为专业人士也不是啥都懂，万一遇到个真的啥都懂的，人家必然也不会去做前端，这就显得一些面试官和求职者的八股攻防战可笑了起来。

那么如果真的遇到一些场景需要学习相关知识，或者就是单纯的个人感兴趣想了解一下原理和细节，最好的办法是什么呢？很简单，直接看相关团队的 Blog 或核心开发人员的 Blog & 演讲，这都是除去源码的第一手消息，水平比那些二道贩子不知道高到哪里去了。

最近两年没怎么更新博客，算了一下从 2022 年开始，只更新了 5 篇（虽然之前也不多），这个还是远远低于自己的预期的。其实在公司内部也输出过一些技术文档和文章，但是限于篇幅和敏感性都没有放到公网上，其实还是有些可惜的。

「SVG 图片中字体失效」的修复方案很简单，只想看答案翻到最后看结论就行。如果想看我的排查思路和具体原因可以从头开始阅读。