开发者工具入门

LEVEL 00 · DEVTOOLS

开发者工具是浏览器自带的“网页检查室”。你在里面做的临时修改只影响自己眼前的页面，刷新后就会恢复。

怎么打开

系统	打开完整工具	直接打开 Console
Mac	`⌘ + Option + I`	`⌘ + Option + J`
Windows	`F12` 或 `Ctrl + Shift + I`	`Ctrl + Shift + J`

也可以在页面空白处点击右键，选择 检查 / Inspect。

先学三个面板

01 · 页面长什么样Elements找 HTML、看 CSS、临时改颜色。02 · 代码说了什么Console看红色报错、打印变量、运行一行 JS。03 · 页面请求了什么Network看 API 地址、状态码、发送和返回的数据。04 · 完整练习修改本站卡片按步骤改颜色、找请求，再刷新恢复。

在开发者工具里改了网页颜色，会把线上网站永久改掉吗？

答案：不会。通常只改了你浏览器当前这一份页面，刷新后会恢复。真正修改网站要改源代码并重新部署。