Chrome DevTools十个实用技巧——不写代码也能用

很多站长把Chrome当普通浏览器用，其实它自带的开发者工具（DevTools）才是检查网站的利器，而且不需要你会写代码。今天分享十个我天天在用的技巧，每一个都能直接上手。

第一，右键检查元素。看到页面上哪里不对劲，右键点「检查」，对应的代码和样式就出来了，不用整页乱找。第二，移动端模拟。按F12后点那个手机小图标，就能模拟手机屏幕，你的网站手机上长啥样、有没有滚动条、字会不会溢出，一眼看清。

第三，看网速慢在哪。切到Network（网络）面板，刷新页面，每个资源加载多久、哪个文件最大，清清楚楚。首页慢，十有八九是某张图几MB没压缩。第四，Console看报错。红色的报错信息都在这里，虽然你不一定看得懂，但至少知道有没有报错，截图发给开发也方便。

第五，Lighthouse打分。在审计（Lighthouse）面板点生成报告，它会给你性能、SEO、无障碍几个维度的评分和改进建议，全是中文的，照着改就行。这个对SEO优化特别有用。第六，整页截图。想截整个网页长图，不用装插件，DevTools里按Ctrl+Shift+P输入screenshot，选capture full size screenshot就行。

第七，临时改文字。检查元素后双击文字就能改，改完网页上实时显示，不用真改代码，适合做「改完效果预览」给老板看。第八，看图片尺寸和格式。检查图片元素，就能看到它的真实尺寸、文件大小、格式，判断是不是图片优化不到位。

第九，复制样式。看到别家网站某个按钮做得好，检查它，右键复制整个样式，粘贴到你的CSS里改改就能用。第十，Performance看卡顿。页面滚动卡顿，录一段性能分析，能看到是哪个脚本在拖后腿。

每天花十分钟打开DevTools看看自己的网站，比报个几千块的培训班有用。工具是免费的，知识是现成的，就看你用不用。

标签： Chrome DevTools 实用技巧