如果说业务开发中最重要的能力，那定位代码的能力肯定是其中之一。 业务项目一般代码都很多，你拿到一个需求之后，可能改起来不难，但是要定位在哪里改比较难。 特别是接手别人写的代码的时候。 大家都是怎么在不熟悉的项目里定位的代码呢？ 很多都学都是搜文案，搜 className。 这样没问题，但如果你用了 styled-component 之类的方案之后，className 都是动态生成的： 而且不少项目

如果说业务开发中最重要的能力，那定位代码的能力肯定是其中之一。 业务项目一般代码都很多，你拿到一个需求之后，可能改起来不难，但是要定位在哪里改比较难。 特别是接手别人写的代码的时候。 大家都是怎么在不熟悉的项目里定位的代码呢？ 很多都学都是搜文案，搜 className。 这样没问题，但如果你用了 styled-component 之类的方案之后，className 都是动态生成的： 而且不少项目

上节我们把 chrome devtools frontend 跑起来，然后连上自己做的 CDP backend，实现了 network 面板、element 面板的对接，明白了 Chrome DevTools 的运行原理。 那我们能基于已有的 backend，自己实现 frontend 么？ 当然也是可以的。 我们通过命令行的方式把 chrome 跑起来，通过 remote-debugging-p

国际化是前端应用的常见需求，比如一个应用要同时支持中文和英文用户访问。 如果你在外企工作，那基本要天天做这件事情，比如我待过韩企和日企，我们的应用要支持韩文和英文，或者日文和英文。 那如何实现这种国际化的需求呢？ 用 react-intl 这个包。 这个包周下载量很高： 我们来用一下。 创建个项目： npx create-vite 我们先安装 antd 来写个简单的页面： npm install

前面学习了 Chrome DevTools 的各种工具的使用，从这节开始深入下它的实现原理。 调试工具都包含 frontend、backend、调试协议、信道这四个部分： 而在 Chrome DevTools 里这个调试协议就是 Chrome DevTools Protocol，简称 CDP。 打开 CDP 的文档，可以看到 CDP 协议分为了不同的 Domain： 比如 DOM、CSS、Debu

今天我们来实现一个查询城市天气预报的服务。 使用的是和风天气的免费 api。 免费的接口一天可以请求 1000 次，自己的项目足够用了： 最多可以查询未来 7 天的天气预报。 首先，登录和风天气， 然后在用户中心绑定邮箱和手机号： 之后进入控制台，点击创建项目： 这里大家选择免费订阅（我别的项目用了，就没免费名额了），指定 key 的名字： 然后就可以看到你的 key 了： 如果我们要查询青岛未来

前端开发经常会涉及表单的处理，或者其他一些用于输入的组件，比如日历组件。 涉及到输入，就绕不开受控模式和非受控模式的概念。 什么是受控，什么是非受控呢？ 想一下，改变表单值只有两种情况： 用户去改变 value 或者代码去改变 value。 如果不能通过代码改表单值 value，那就是非受控，也就是不受我们控制。 但是代码可以给表单设置初始值 defaultValue。 代码设置表单的初始 val

大家应该都用过在线写代码的工具，比如 vue 的 playground： 左边写代码，右边实时预览。 右边还可以看到编译后的代码： 这是一个纯前端项目。 类似的，也有 React Playground 那它是怎么实现的呢？我们自己能实现一个么？ 可以的，今天我们来分析下实现思路。 首先是编译： 编译用的 @babel/standalone，这个是 babel 的浏览器版本。 可以用它实时把 tsx

当线上有报错的时候，大家是怎么定位问题的呢？ 断点调试么？ 但是这时候代码是被压缩过的，变量名都是 a、b、c、d 这种，根本看不出啥来。 如果调试线上报错能像本地开发的时候一样就好了。 其实这是可以做到的，这节就分享下如何优雅的调试线上报错： 首先，我们准备一段 JS 代码： 这是我随便找的一段 JS 代码，里面抛了一个错误。 然后用 webpack 进行编译： 在 index.html 里引入