1.Ctrl + P ：查询并打开文件（打开的文件必须是通过点击浏览器页面后加载过的文件）
Ctrl + P打开浏览器加载过的文件
2..Ctrl + F：在浏览器打开的文件中搜索内容
在浏览器打开的文件中搜索内容
3.清除缓存:鼠标右键点击刷新图标，选择清空缓存并硬性重新加载（需要在使用了F12打开了调试页面的情况下）
清除缓存，硬性加载
调试状态下清除缓存，重新加载
4.断点调试:
在需要调试的vue文件中，先通过浏览器点击进入对应的页面，然后浏览器会加载与该页面相关的文件，然后我们就通过Ctrl+P,搜索浏览器加载过的文件，再通过Ctrl+G搜索打开的文件中代码的行号，在该行号处即可打上断点进行调试
在浏览器上搜索加载过的文件，找到代码的对应行号进行断点调试
快速进行断点调试
此时我们可以在需要调试的vue文件中，写上console.log(xxx),或者是直接写一个debugger,然后在想调试的地方打上断点，调试该页面的时候会直接进入这个vue文件并进入到这个断点
注意:
我们是在浏览器打开的文件中打断点，写console.log(XX)或者是debugger,不要去源文件中修改代码，不然每次VSCode等开发工具都会去编译文件，太耗时间了，我们直接在浏览器上调试前端，打印值等，不需要开发工具编译，可以节省时间，提高开发效率
激活断点
取消断点
5.前端直接打印值
不想等开发软件编译前端代码，可以直接在前端写console.log(xx)，然后在前端调试效果，样式也可以直接写在前端看效果，此种方式适合调整前端样式，和需要打印某个值的时候
下图：直接在浏览器中写了一个打印代码，没有修改源文件中的代码，无需等软件编译，即可进行调试，调试前端的样式，写样式代码样式可以这样进行调试的，节省软件编译的时间
直接在浏览器打印值，进行调试
6.使用Watch监听作用域中，自己想看的某个变量的值
需要在断点调试模式下：
使用watch监听作用域中selectData这个变量
当进入这个方法的断点后，就可以看到作用域中监听的变量的值
网友评论