每天省两小时的5个前端开发技巧，我用了三年还在用

写前端十年了，有些习惯是踩了无数坑以后养成的。下面这五个技巧不是我发明的，但确实是每天帮我省时间的。

1. 浏览器DevTools的代码片段功能

Chrome DevTools里有个Sources > Snippets，可以保存代码片段随时运行。我存了大概二十几个，最常用的几个：一键解绑页面所有事件监听、提取页面所有链接、模拟移动端触摸事件、批量修改DOM元素属性。不用每次都开Console重新敲。

比如这个解绑所有事件的snippet，调试别人的网站时特别好用，能快速判断是JS问题还是CSS问题。

2. alias大法

我的.gitconfig和.bashrc里存了大量alias。gc=git commit -m, gp=git push, gst=git status。npm的alias更好用：nr=npm run, nd=npm run dev, nb=npm run build。每天光git和npm的alias加起来就省了至少十分钟的打字。

关键是别贪多。只给每天用三次以上的命令加alias，否则你会忘记自己设了什么。

3. 用Live Expressions代替console.log

Chrome DevTools控制台右上角有个眼睛图标，点开可以创建Live Expression。跟console.log不一样的是，它会实时显示表达式的当前值，不需要你手动触发。比如你想监控一个变量的变化，写个Live Expression放着就行，比打一堆断点高效。

4. CSS的:has()选择器

2024年所有浏览器都支持了，但我发现很多前端还没养成用它的习惯。:has()让你可以根据子元素选择父元素——这在以前只能用JS实现。比如.card:has(img)选择包含图片的卡片，.form:has(:invalid)选择包含非法输入的表单。用在组件库和设计系统里特别有用。

5. 写一个初始化脚本

每次拉一个新项目、换一台电脑，配置环境就要半天。我写了一个shell脚本，一键装好所有常用工具、配置git、设置npm源、生成SSH密钥。放在GitHub Gist上，新环境只要curl一行命令跑完。每次换电脑至少省半天时间。

标签： 前端技巧 开发效率 DevTools CSS技巧