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