1、通过快捷键Ctrl+U可查看网页静态HTML源代码；2、右键选择“查看网页源代码”能检查特定框架内容；3、使用“检查”功能可实时审查DOM元素；4、在地址栏输入view-source:加网址可直接访问源码页面；5、按F12打开开发者工具，可在Sources和Network中调试脚本与监控请求。
如果您在浏览网页时需要检查页面的具体构成或排查显示异常，可以通过浏览器的开发者工具来查看网页源代码。这有助于理解网页结构或定位问题。
本文运行环境：Dell XPS 13，Windows 11
一、使用快捷键直接查看源代码
此方法适用于快速查看网页的原始HTML内容，不包含动态生成的元素。
1、打开Edge浏览器并导航到目标网页。
2、按下 Ctrl + U 快捷键。
3、浏览器将新开一个标签页，显示当前网页的静态HTML源代码。
二、通过右键菜单查看框架源代码
当网页包含多个框架或iframe时，可通过此方式查看特定区域的源码。
1、在网页任意位置点击鼠标右键。
2、选择“查看网页源代码”选项。
3、系统将弹出新窗口展示该框架下的HTML源码内容。
三、使用开发者工具审查元素
开发者工具可实时查看和修改DOM结构，适合调试动态内容。
1、在网页上选中要检查的元素，点击鼠标右键。
2、选择“检查”选项。
3、Edge开发者工具面板将打开，默认定位到“元素（Elements）”标签页。
4、在左侧树状结构中可展开、折叠节点，查看完整的DOM结构。
四、通过地址栏命令打开源代码页面
利用内置的调试协议可以直接访问源码视图。
1、在Edge浏览器顶部的地址栏输入 view-source: 前缀。
2、在其后追加完整网址，例如：view-source:https://www.example.com。
3、按下回车键后，页面将显示对应网址的原始HTML代码。
五、启用开发者工具进行高级调试
开发者工具不仅支持查看源码，还可监控网络请求、调试JavaScript等。
1、按下 F12 或 Ctrl + Shift + I 打开开发者工具。
2、切换至“源代码（Sources）”或“网络（Network）”选项卡。
3、在“Sources”中可查看加载的所有脚本文件，在“Network”中可逐条查看资源请求详情。
4、点击任一文件即可在右侧查看其具体内容，支持断点调试与实时编辑。
