除了console,你还可以选择的前端调试方法

fys蜘蛛侠
198 阅读3分钟

前言：

大家在写代码时每个人都有自己调试的方法，这里只是简单总结了一下自己在用的调试方法

本地调试就不说了，这里着重说了一下生产环境的调试，有时候会有一些突发情况或者场景可能会用到

本地调试

懂的都懂，会的都会，就不说了哈，哈哈哈哈！！！

1、console.log("xxxx")

  • 在代码需要的任何地方，打印你想要的，看是否和预期一样

2、debugger

  • 在代码需要的任何地方去打断点，然后去调试

  • 配合控制台中调试的几个按钮：一步到位走到头、进入函数内部一行一行执行、跳过函数内部细节直接执行整个函数）

  • 一般会关注Scope和Watch项，其中watch你可以添加你想查看的变量

3、Vuex

  • 如果你是的数据在Vuex中，你可以下载一个Vue Devtools工具，利用控制台中的Vuex进行调试（下载方式和Ajax Intercepto一样，下面会说（需要开VPN））

线上调试

1、修改线上css

  1. 随意任何地方创建一个文件夹

  2. 右键检查打开控制台→Sources→Overrides→+Select folder for overrides（选择第一步创建的文件夹）

  3. 第二步若有提示，选择允许即可添加成功（如下图）

image-20220418153307192.png

  1. 选择Page，就是当前页面的一些资源，此处选择css点击右键Save for overrides即可

image-20220418154922380.png

  1. 此时你可以在当前控制台修改你任何想修改的样式，都会保存在debug文件夹下
  2. 你也可以把当前文件夹下的css拖入vscode中找到你需要的样式进行修改（先格式化样式，因为是压缩的css），修改完成点击保存，依然会同步，且刷新不会丢失 image-20220418155248139.png
  3. 例如（把蓝色修改成红色），调试完成后，直接在控制台删掉步骤二的文件（点击Clear configuration）

image-20220418155802126.png

2、修改线上js

  1. 同步修改线上css步骤（1-3）

  2. 选择Page，就是当前页面的一些资源，此处选择js，点击右键Save for overrides即可

image-20220418170708595.png

  1. 此时你可以在当前控制台修改你任何想修改的js，都会保存在debug文件夹下（你自己写的代码，你应该清楚你要改啥js）

  2. 你也可以把当前文件夹下的js拖入vscode中找到你需要的js（先格式化样式，因为是压缩的js），修改完成点击保存，依然会同步，且刷新不会丢失

image-20220418171029620.png

  1. 例如（这里简单打印一个东西出来），调试完成后，直接在控制台删掉步骤二的文件（点击Clear configuration）

image-20220418172332296.png

3、修改线上axios请求数据

  1. 谷歌浏览器下载扩展程序Ajax Intercepto

image-20220418173255254.png

  1. 这里需要手动打开并使用Ajax Intercepto（不用时一定要记得关掉！！！）

  2. 例如（这里简单修改一下userInfo这个接口里面用户名和用户id）

image-20220418174215615.png

  1. 如图，已经拦截了线上的接口请求数据，不用时一定要关掉Ajax Intercepto

image-20220418174436253.png

avatar
文章
阅读
粉丝