谷歌浏览器调试vue项目

前言

众所周知,在项目过程中我们常常遇到的一个问题就是本地调试的时候没问题但是发布到线上的时候就不行了。在时间充裕的情况下,我们当然可以慢慢调试,但是那是不可能的。在线上遇到问题时,难免会倍感压力和焦虑,这个时候就有必要强化前端的调试能力了。谷歌浏览器作为最受欢迎的浏览器,设计者们必定也早已经帮我们考虑过调试的问题。

一、开发者工具中的Overrides功能

它能够实现在不改动源码且不用重新打包发布就能改变前端脚本的执行逻辑,这样就大大减少了排错的时间。

原理是浏览器执行脚本时会使用位于浏览器客户端本机的临时脚本代替从服务器后台返回的脚本。

1.首先切换到开发者工具中的 page页选项卡

page页列出了当前浏览器中已打开的网站以及网站的页面文件,此时可以切换到Overrides选项卡

并选择一个本地的文件夹

选择完文件夹之后右键点击已打开的test.html标头选择 "save for overrides" 将test.html保存到我们选的文件夹中

保存完之后我们编辑test.html加入一行调试代码然后ctrl + s 保存修改

完成之后刷新页面看控制台的输出,发现确实生效了

二、断点调试

1.正常断点

正常断点会阻塞用户的操作直到断点结束,断点命中时可以查看和修改作用域中的变量。

实际操作过程中可以从http请求的堆栈进入添加断点,如下

切换到network选项卡后锁定一个http请求然后从Initiator列将鼠标悬停后选择堆栈的某一层,如 "options.vue?937c:651"

进入之后会自动切换到Source选项卡并打开options.vue源码,当然这个源码也可以从Pages页面的WebPack:// 栏目打开,在打开的源码视图中行号前点右键菜单可以进行添加断点

分别是 Add breakpoint（添加断点） Add conditional breakpoint （添加条件断点）

Add logpoint （添加日志断点）

添加断点之后会发生页面会出现阻塞 ,同时可以在源码区域和右侧面板查看局部变量.

这时候如果需要修改作用域内的变量,需要切换到 console 选项卡

所以这种方法打断点不仅可以查看变量还可以修改变量。

缺点是会阻塞页面操作

2.条件断点

当正常语句碰到循环语句诸如 while和for时如果循环次数过多明显不利于快速排查bug,所以

条件断点应运而生。

添加断点时加入条件表达式 i == 998

运行结果如下,当i == 998时会进入断点,其它的操作和上述断点一致

3.日志断点

日志断点实现和console.log一样的效果,专门用于变量的打印输出

优点是不会引起页面阻塞，缺点是不能修改变量

添加断点的时候表达式和console.log 参数保持一致

运行结果如下

谷歌浏览器调试vue项目相关推荐

浏览器下载安装vue js devtools调试vue项目
下载vue js devtools插件的方式: 推荐网址: 1.https://www.extfans.com/ 2.百度下载谷歌浏览器助手插件,直接进入谷歌网上应用商店进行下载 3.https:// ...
安卓手机模拟器调试--vue项目在线调试（HBuilder X, 配合模拟器--夜神模拟器）及打包
1.下载HBuilder X 下载地址 -- https://www.dcloud.io/ 2.打开HBuilder 建一个项目 3. 打包自己的Vue项目,vue-cli2 在目录下的config文 ...
vue调试工具如何使用_教你使用Vue.js的DevTools来调试vue项目
Vue DevTools项目的官方主页位于GitHub上:https://http://github.com/vuejs/vue-devtools.你可以找到安装说明,帮助解决一些问题等等.目前该扩展 ...
idea调试vue项目
前言之前尝试的各种前端编辑器H5Builder,SublimeText,VSCode,NotePad++等等:作为一名后端开发,自己是从Eclipse系列的IDE转向使用JetBrain系列,深受I ...
Chrome调试vue项目时session异常,后端tp6 session使用异常
Chrome调试时跨站不能设置cookie问题 this set-cookie didn't specify a "SameSite" attribute,然后变成默认Lax. 然 ...
前端Vue项目调用页面web3.js:连接metaMask钱包,(查询钱包ETH余额,查询代币余额,ETH转账,代币转账,代币授权,查询授权数量,计算价格)等功能
这里分享下相关文档 1.web3.js中文文档 https://learnblockchain.cn/docs/web3.js/getting-started.html 2.metamask官方文档: ...
Vue项目构建开发入门
Vue项目构建开发入门开篇:Vue CLI 3 项目构建基础大家好,当你点进这个标题,开始阅读本章的时候,说明你对 Vue.js 是充满好奇心和求知欲的.我之前写过一篇文章,这样评价 Vue.js ...
解决VS调试web项目启动谷歌浏览器“无标题”、“已崩溃”问题
解决VS调试web项目启动谷歌浏览器"无标题"."已崩溃"问题方法一: 尝试添加任意一个参数,如 --no-sandbox--test-type --no-s ...
vue项目手机调试配置
vue开发手机版项目过程中,需要手机调试,网上给的方法有很多, 我的设备是win10电脑 + 安卓手机, 常用两种手机调试本地项目方法:chrome和微信开发者工具. 一.vue-cli2项目中更改配 ...

谷歌浏览器调试vue项目

谷歌浏览器调试vue项目相关推荐

最新文章

热门文章