怎样查看网页源代码和审查元素——每个前端开发者应该掌握的调试技能

我学会做网页的第一步，不是看书，不是上课——是看别人的代码。

看到一个好看的布局，右键→”审查元素”，看它 CSS 怎么写。看到一个炫酷的动画，打开 Console 面板，看什么 JS 实现的。这个习惯一直保持到今天。

一句话理解： 查看网页源代码是”读”别人写好的代码，审查元素是”调试和修改”当前页面——两者都是前端开发者最基础、最好用的学习工具。

查看源代码 vs 审查元素

在页面上右键 → “检查” → 直接定位到该元素的 HTML。然后在右侧的 Styles 面板中修改 CSS，页面会实时更新。

刷新页面后，Network 面板会列出所有请求：

1 2	按大小排序 → 找最大的文件 → 通常是图片或 JS 库按时间排序 → 找耗时最长的请求 → 通常是外部 API 或字体

// 在 Console 里直接执行 JS，实时看到结果
document.title  // 查看页面标题
document.querySelectorAll('img').length  // 统计图片数量
$$('a').map(a => a.href)  // 提取所有链接

右击某个元素 → Copy → 可以复制 JS path、CSS selector、完整的 HTML。

经验之谈： 我的 CSS 有一半是在 DevTools 里”调”出来的。先写好基本样式，然后 F12 打开 Elements 面板，在 Styles 里微调——调好了再复制回编辑器。这样比在编辑器里反复保存刷新快太多了。

# Chrome 远程调试
# 手机连接电脑 USB → 开启 USB 调试
# 在 Chrome 地址栏输入 chrome://inspect
# 就能调试手机上的网页

或者在 DevTools 里切换到移动端模拟（手机图标），模拟各种设备的屏幕尺寸。