Web 开发中，大多数人都会习惯在浏览器端调试代码，而借助 vscode，可以带来不一样的调试体验，试想在代码编写处，直接打一个断点，实时 debugger，体验是不是更顺畅了一点？

以下简单介绍日常 SPA 单页应用、nodejs 应用的调试。

launch 模式

1、项目中添加调试配置

操作“运行 - 添加配置”，下拉选择 chrome 自动添加即可，根据需要修改参数值

示例如下：

{
  // 使用 IntelliSense 了解相关属性。
  // 悬停以查看现有属性的描述。
  // 欲了...

Charles 中如何抓包、代理 websocket 请求？过程有些复杂、坑点颇多，这里提供一份可用的方案。

请先确保你的 charles 能够抓到浏览器的请求，通常你可能需要注意以下几类问题：

• 确保已勾选 charles 的 Proxy - macOS Proxy 选项
• 浏览器推荐设置为“系统代理”，如果使用了某些浏览器的代理插件，请记得切换
• 是否已安装好 https 证书？
• 如果有使用某些 VPN 代理工具，可能会存在代理冲突。如果遇到了抓不到请求的问题，推荐先关掉 VPN 工具，随后重启...

https://www.macwk.com/article/apple-silicon-m1-application-crash-repair

最好能够翻墙，并且设置终端可翻墙，否则速度太慢可能断掉。

1. 安装

   对于 M1 芯片的 Mac，低版本的 nvm 使用存在一些奇怪的问题，需要卸载后重装最新版本。

   curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

   安装完成后，修改 zsh 终端...

在区分企业与个人项目的提交信息时较为常用

# 推荐单独创建配置文件
touch ~/.gitconfig-xx

例如，需要单独设置 username/user-email

[user]
    name = xx
    email = xxx@gmail.com

# 打开 Git 默认的配置文件，添加指定目录下的规则
open ~/.gitconfig

区分目录设置

例如，指定 ~/xx/xx/ 目录使用上方创建的 .gitconfig-xx 配置，则在 ~/.gitconfig 文件中添加如下配置：

[includeIf...

yarn workspaces 结构的项目，在执行命令安装子包依赖时，可能会看到如下错误：

Failed to install dependencies in workspace: expected workspace package to exist

yarn issues 下的相关问题讨论：https://github.com/yarnpkg/yarn/issues/7807

目前比较简单的处理办法是降级 yarn 到 v1.18.0

yarn policies set-version 1....

转自 DuPei 同学的文档，这是比较全面的方案调研，转载分享给更多人，待将来需要时细细研究。

HLS 全称 HTTP Live Streaming，顾名思义是一个基于 HTTP 的流媒体传输协议。是由苹果公司提出，在苹果家族的整个产品都得到了比较好的支持，后来谷歌在 Chrome 浏览器和移动端浏览器也进行了原生支持，所以目前无论你是在 PC 还是移动端的浏览器基本都原生支持 HLS 协议进行播放视频，算是一个在移动端比较好的跨平台方案，同时微信内嵌的浏览器也都是原生支持的。

它允许用户从...

如何管理应用内的接口请求？

这是一个值得讨论的问题，涉及如下若干方面：

1. 避免多次调用同一个请求（不同页面或不同组件）？
2. 失败了自动重试？
3. 切换浏览器 tab 返回页面时，自动发送请求更新数据？
4. 列表滚动位置恢复？
5. …….

这些问题可以在以下几个社区方案里找到答案（react-query 似乎更胜一筹）：

• reacrt-query：https://zhuanlan.zhihu.com/p/261146977
• swr：https://swr.vercel.app/zh-CN
• ahooks/useRequest...

一个不太常见，但很重要的 core-js bug 讨论：https://github.com/zloirock/core-js/issues/514

core-js 是 es3 的代码，应当是不需要 babel 编译的，但是，因为某种原因（暂不清楚），babel 会对 core-js 进行处理，并且会影响其中的代码，进而会发现 Symbol 在 Android 6.0 等低版本浏览器的兼容性出问题。

在移动端页面，小伙伴实际遭遇到了这种现象，依赖的第三方包使用了 Symbol 语法，即使引入全量...

内置 craco 扩展配置的 CRA Template，可直接使用。
TS 版本：@eleven.fe/cra-template-typescript
ES 版本：@eleven.fe/cra-template

使用 CRA 脚手架创建的项目，如果想要修改编译配置，通常可能会选择 npm run eject 弹出配置后魔改。但是，eject 是不可逆操作，弹出配置后，你将无法跟随官方的脚步去升级项目的 react-scripts 版本。

如果想要无 eject 重写 CRA 配置，一般可以有以下...