DevTools是浏览器自带的Web开发工具，例如Chrome和Microsoft Edge等浏览器均提供DevTools工具，它们分别是Chrome DevTools与Microsoft Edge DevTools，提供了一种用于检查和调试网页和 Web 应用的强大方法。
在实际应用中，部分开发者或站长不太清楚DevTools的用途和使用方法，所以813站长大咖特意撰写本教程，希望能帮到大家，以便解决一些WEB网页的问题。
教程以Microsoft Edge DevTools为例，因为它的界面是中文的，且Microsoft Edge浏览器是Windows自带的，无需额外安装。（与Chrome DevTools的功能基本相同）
Microsoft Edge DevTools基本概述
- 使用具有可视界面的实时工具检查、调整和更改网页中元素的样式。 检查浏览器存储内容以构造网页的位置，包括
.html``.css``.js文件格式和.png文件格式。 - 模拟网站在不同设备上的行为方式，并模拟具有不同网络条件的移动环境。 检查网络流量并查看问题的位置。
- 使用断点调试和实时控制台调试JavaScript。 查找 Web 应用的内存问题和呈现问题。
- 查找产品中的辅助功能、性能、兼容性和安全问题，并使用 DevTools 修复找到的辅助功能问题。
- 使用开发环境将 DevTools 中的更改与文件系统和 Web 同步。
- 检查网页加载的所有静态资源的网络状况与速度。
WordPress的前端页面简介
所谓前端页面就是在网站访问者浏览器中呈现的网页，WordPress是由PHP开发的，但对于访问者来说PHP是感知不到的，那个是后台驱动的程序。前端页面呈现的只有HTML、CSS、JavaScript、字体和图像（包括动画与视频）。
开发者或站长（以下统称开发者），使用WordPress的Gutenberg、Elementor或Divi等页面编辑器制作的网页均会在被前端访问时通过PHP程序生成HTML，且会配套加载CSS与JS（JavaScript）、字体、图像等静态资源。
可以这样理解，任何WEB页面基本上都是以HTML为基础，辅以CSS样式与JavaScript程序来呈现的。因为所有浏览器只能“读懂”这些代码，PHP只能在服务器端执行，并不能在访问者的浏览器上执行。
| 在服务器端运行的代码 | 在浏览器客户端运行的代码 |
|---|---|
| PHP、MYSQL | HTML、CSS、JavaScript |
弄明白这些，才能继续往下阅读。
而DevTools是一款浏览器的开发工具，所以它只能调试在浏览器客户端运行的所有代码。
如何打开Microsoft Edge DevTools或其它浏览器的DevTools
不论是Microsoft Edge、Chrome或是Firefox等浏览器，开启DevTools的方式都相同，有以下三种：
- 右键单击网页上的任何项，然后单击 “检查”。
- 按Ctrl+Shift+I（Windows、Linux）或 Command+Option+I （macOS）。
- 按
F12。
