一、打开方式
打开网站，按F12（或者右键，按检查）；
二、Tab介绍
1.修改HTML
【小技巧】CTRL+F5查找元素
右键-编辑为HTML
2.复制某个元素的xpath
右键-复制
复制xpath（相对路径，推荐）：
//*[@id="wrapper"]
复制完整的xpath：
/html/body/div[3]
3.查看事件
4.修改样式
利用元素定位器，定位元素后可以单独修改这个元素的样式
还可以直接复制css
五、控制台
1.查看前端报错
第一行是引起错误的行数，右上角这个是代码最终停止运行的位置
2.打印变量
【语法例子】
console.log("value:", value); //单值打印
console.log(`My value is : ${value}`)；//字符拼接
console.log("array:", array.join(', '));//数组打印（逗号拼接）
array.forEach(item => {console.log(item);});//数组打印（换行）
$value; //断点调试中，如果前端已存在value值，可直接打印
六、源代码
【源代码不完整】按F5刷新，或尝试退出登录重进，如果此页面只涉及A资源，不涉及B资源，那么源代码页面上只会显示A资源
1.断点设置
下面这种也是断点设置，按右上角单步运行时，鼠标悬浮可以看到变量值。
跳到断点：
2.断点介绍
在VSCode中打断点：
在F12工具中使用单步运行：
七、网络
1.接口查询过滤
【WS】Websocekt过滤
2.前端和后端的变量
3.编辑重发Post请求
右键操作
八、常见问题
1.控制台不显示console.log内容？
3.查看接口信息时遇到页面自动刷新,看不到接口的问题
4.如何利用F12找到前端代码位置
方法一：点击对应接口的发起程序
方法二：F12工具中直接CTRL+P查找（前提是已知vue的名称）
方法三： 前端界面打印内容，控制台点击跳转
F5刷新，退出重进，再看看源代码，然后下面是一个技巧
方法四：查看框架url
方法五：前端页面中搜索页面关键字
