前端开发调试工具推荐与技巧分享

https://blog.csdn.net/chehec2010/article/details/119804381
https://baike.baidu.com/item/XMPP/3430617?fr=aladdin
https://juejin.cn/post/7124620523316707341
前端开发调试工具推荐与技巧分享
vscode插件
驼峰翻译助手 将中文翻译成英文变量名，可选择驼峰或者别的格式
解决变量命名困扰settings →搜索"varTranslate"

change-case
快速转换变量命名风格command+shift+P→搜索"change case"

Prettier -Code formatter
代码格式化工具 统一代码风格 右键→ Format Document With

wxml
wxml语言代码高亮及格式化工具 右键→ Format Document With

wxml语言代码高亮及格式化工具
Hint: double-click to select code
{
“minapp-vscode.wxmlFormatter”:“prettyHtml”
“minapp-vscode.prettyHtml”:{
“useTabs”: false
“tabWidth”:2,
printWidth": 80
}
}

React code snippets
快速生成React组件框架代码 常用命令：
rsc(react stateless component)
rcc(react class component)

vscode-fileheader
添加统一的文件头注释，含作者、最后修改人信息
便于快速找到对应团队成员沟通问题
Command+shift+P →搜索"fileheader"
快捷键：ctrl+option+l

GitLens — Git supercharged
定位到某一行，即可看到历史提交者信息移动到代码行并稍等

Project Manager将项目目录或者workspace命名管理起来
多个项目整理分类，方便在不同项目间的切换
Search node_modules
node_modules下查找npm包所在目录command+shift+P→搜索"node modules"
Javascript console utils
快速添加console.log语句 快捷键：shift+command+L
终端/npm工具
http-server
https:/www.npmjs.com/package/http-server
本地快速启动提供http服务
可以搭配使用chrome的workspace,以及charles.肤射线上代码到本地
然后快速检查本地代码修改后的效果。
Husky+lintstaged
https://www.npmjs.com/package/husky
js代码校验git提交代码前做校验
http-server使用场景举例— 本地调试build代码
家医的应用本地调试，通常采用nginx+npm start的方式。(关于nginx配置，参考：nginx配置和host记录)
其原理大致就是npm start可以实时编译本地源码，并且启动了一个dev server,然后利用nginx配置将local前缀的域名映射到了dev server.
如果想直接调试ngm build构建的代码?
部署在服务器的代码是npm build后的代码，对应的构建环境(process.env)是production,而npm start的构建环境(process.env)是development
明显两者存在差异，有时候可能通过start调试的代码没有问题或者看不出问题，于是想直接检查build后的代码。
参照 nginx+npm start的方式，那么只要本地为build后的代码开启一个本地http服务(端口号与start时一致),此时访问local前缀的域名，就切换到了build后的代码
步骤举例

打开健康建议页应用(wimbledon)
npm run build生成dist目录
打开终端进入dist目录，启动http-server-p=4202
浏览器访问：
https://local.test.com/wimbledon/medicine.html?
另外可以结合chrome的workspace功能使用：
dist目录拖入到chrome的sources面板中的workspace
在chrome的source中直接修改代码，即可实时查看修改后效果
Husky+lintstaged
注意会husky@8会和gerrit-msg-lint冲突
chrome调试工具
截屏技巧
command+shif+P: capture
老旧的浏览器可能不支持。参考MDN的全局监听error的方法：
https://developer.mozilla.org/zh-CN/docs/Web/APl/Window/error evente
Charles
最常用的是映射功能，包括map remote和map loca
在线工具箱；
https://tools.fun/
https://tinypng.comtinypng
https://astexplorernetASTExplorei
https://cubic-bezier.com/#.17.67.83.67cubic-bezieiRegexi
https://regexr.combabel-Try it outhttps://babeljs.io/rep
在线图片压缩
ast实时转换
贝塞尔曲线动画测试
正则表达式测试工具
实时查看编译后的代码
caniuse
https://caniuse.coml
ecma compatibility table
https://kangax.github.io/compat-table/es61