新手站长们务必要知道和会使用的神器：浏览器开发者工具（Dev Tools）

今天明月给新手站长们推荐一个务必要知道和会使用的神器那就是浏览器开发者工具（简称 DevTools）是一组网页制作和调试的工具，内嵌于浏览器中。DevTools 使开发者更加深入的了解浏览器内部以及他们编写的应用。通过使用 DevTools，可以更加高效的定位页面布局问题，设置 JavaScript 断点并且更好的理解代码优化。现在人们不仅仅用它来调试 Web 前端页面，还将它扩展用来调试移动应用和服务端应用。

这个开发者工具在电脑端的浏览器里都是内置的，随时可以F12调用的，一般手机版的浏览器都是禁用的，主要也是因为受制于屏幕大小限制，当然也有例外那就是Kiwi Browse这个手机浏览器就支持在手机上使用开发者工具，官网提供单独的 Android 应用 APK 格式下载，有兴趣的可以下载安装体验一下哦。

值的注意的是在各个主流浏览器都有这个开发者工具，只是名称上可能有些小区别，如：

• 谷歌 Chrome里叫开发者工具
• Edge 里叫开发人员工具
• FireFox 里叫Web 开发者工具

反正他们都是浏览器的Dev Tools，一般在浏览器菜单——【更多工具】里可以看到。

至于这个开发者工具能干什么，为什么新手站长都务必要会使用，明月自己总结了如下几点：

• 1、用来调试网站网页前端必备，如修改、排错 CSS/JS 代码造成的布局错位、布局调整等等。懂前端的应该都知道。
• 2、网站开启了缓存或者使用了 CDN 缓存后，借助开发者工具查看缓存命中情况。
• 3、查看网站 SSL 证书状态。
• 4、排除网站载入故障，页面载入错误等等，可以大大提高排错的效率。
• 5、甚至用来查看谷歌 AdSense 广告投放情况。
• 6、查看网站页面载入速度，甚至对全站进行测速。

用处实在是太多了，上述仅仅是明月自己经常要用到的而已，还有更多大大提高排错效率的用法，建议参考一些 Dev Tools 教程，系统了解学习、实操最好了。可以参考如下几个教程：

【Chrome 开发工具中文指南】

【Chrome DevTools 中文手册】

【Chrome 开发者工具详解】

别看虽然都是说谷歌 Chrome浏览器的，其实是通用的，在各个浏览器下仅仅是大同小异的区别而已，再说这个开发者工具是支持简体中文版的，小学毕业的水平都能看懂，哈哈！以【谷歌浏览器开发者工具中文设置步骤详解】为例告诉大家如何修改为中文：

首先，打开谷歌浏览器中的开发者模式（浏览器里按下 F12 快捷键），点击设置图标(如图所示)。

将 language 改为 Chinese，关闭页面(如图所示)。

点击 Reload DevTools 重新加载开发者工具(如图所示)。

语言变为中文(如图所示)。

好了，这时候你的浏览器开发者工具就已经是简体中文了，按照上述手册、使用说明等教程去慢慢学习、体验吧！强大的绝对让你叹服。

借助浏览器自带开发者工具里的 Lighthoused 测速网站速度结果截图

其实，明月很早就建议站长们要多用浏览器自带的开发者工具，尤其是在测速自己网站的时候，浏览器开发者工具里的Lighthoused就完全胜任了，去那些所谓的第三方测速平台也就是测试个域名解析速度而已，并且还很容易招来各种恶意爬虫、恶意扫描的注意，具体大家可以参考【建议大家少用点儿网站测速工具】一文就知道了！总之，给大家再次强调推荐浏览器开发者工具只有一个目的，就是提高大家排除故障错误的效率并且保证安全性，不用碰到个啥都要在群里求爷爷告奶奶的“不耻下问”。