google浏览器前端调试

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)，然后在前端调试效果，

样式也可以直接写在前端看效果，此种方式适合调整前端样式，和需要打印某个值的时候

下图：直接在浏览器中写了一个打印代码，没有修改文件中的代码，无需等软件编译，即可进行调试，写样式代码样式可以这样进行调试的，节省软件编译的时间

直接在浏览器打印值，进行调试