edge开发者工具web自定义代码脚本小子速成教程

edge开发者工具web自定义代码脚本小子速成教程

1. 开启开发者工具
   通过右键点击网页元素并选择“检查”来开启开发者工具。
   使用快捷键F12或Ctrl+Shift+I快速打开。

2. 控制台(Console)
   功能：显示浏览器日志、错误和警告信息。
   使用：在控制台中输入JavaScript代码并执行，测试页面交互。

3. 元素(Elements)
   功能：检查和编辑DOM元素，实时预览样式变化。
   使用：选择DOM树中的元素，修改HTML和CSS属性。
   

8、源代码：
在Sources选项卡下，你可以查看和调试网页中的t代码。你可以设置断点，逐行执行代码，并查看变量的值和函数的调用堆栈，以帮助你找出问题所在。

4. 网络(Network)
   功能：监控网络请求和响应，分析加载时间和资源类型。
   使用：筛选特定请求，查看请求头、响应头和响应体。

5. 性能(Performance)
   功能：记录和分析页面加载和运行时的性能数据。
   使用：识别性能瓶颈，如长时间脚本执行或重绘。

6. 命令菜单(Command menu)
   功能：通过命令快速执行开发者工具的常用操作。
   使用：提高开发效率，快速访问工具功能。

7. 抓包(Sniffing)
   功能：捕获和分析网络请求和响应。
   使用：调试API请求，分析数据交换。

快捷键:打开命令菜单:Ctrl+Shift+p
正常刷新：F5 或 Ctrl+R
硬刷新：Ctrl+F5 或 Ctrl+Shift+R

$元素工具键盘快捷方式
在当前选定的元素上切换“编辑属性”模式:Enter
在当前选定的元素上切换“编辑为 HTML”模式:F2

F12后，按元素块，按ctrl+f，输入自己要搜字符，右键修改，完。

网络(Network)

复制粘贴不了，自己看:
https://learn.microsoft.com/zh-cn/microsoft-edge/devtools-guide-chromium/network/