前端魑魅魍魉之谷歌调试提效篇(一)

大家好,我是林家少爷,是一位专注于前端技术,立志成为前端技术专家的热血青年。 真不容易啊,时隔之前的高频率输出,已经足足过去了10个月了。

真不容易了,这10个月我都经历了什么,等到这周末会一一跟大家做一次复盘。 总的来说我在副业上做了很多尝试,今年也是我第一次创业失败回归职场的2年,当然我去面试公司的时候都是说我6年工作经验的嘻嘻

从2022年6月8日回归职场,当时很高兴,发了回归职场的第一个朋友圈,也是我时隔一年终于回归职场,永葆代码。

中间两年时间的主业+副业模式摸索,赚了一点钱,不少自媒体项目都取得了不错的成绩,慎重考虑综合分析,2024年的方向是出海

为什么我选择这个方向,周末跟大家娓娓道来。

说下我最近的项目,工作中使用了低代码,技术栈是vue2,因为是做迭代维护阶段,所以自己也总结了一些提高开发效率的调试方法。

chrome开发者工具$0的用途

首先拿百度作为一个例子,首先选择元素,比如搜索框:

然后到Console控制台输入$0,就打印出了当前页面。

那么有什么作用呢? 作用可大了,比如想要获取当前元素的数值,可以输入:

js 复制代码
$0.__vue__.data

就可以打印出当前元素的列表数据,也可以直接赋值查看效果,比如:

js 复制代码
$0.value="javaScript"

一键重新发送请求

操作步骤如下:

  1. 选中Network
  2. 点击Fetch/XHR
  3. 选择要重新发送的请求
  4. 右键选择 Replay XHR 如下图所示,ps:不用刷新页面,也不用走页面交互,无感发送请求。

在控制台快速发起请求

使用场景:联调或者修复bug的时候,针对同样的请求,有时候需要修改入参重新发起。

操作步骤如下:

  1. 选中Network
  2. 点击Fetch/XHR
  3. 选择Copy as Fetch
  4. 控制台粘贴代码
  5. 修改参数,回车搞定收工

可以通过上面打印对比发送参数以及其他调试:

1. get请求直接修改url上的拼接参数即可

2. post请求修改body里面的参数,可能需要适当的做转义

转义函数: decodeURIComponent

Console中的$

前面已经讲过$0,除此之外还有$1,$2,$3,$4。 当要在Console中调试页面元素时,比如要获取元素的信息,此时就可以使用 <math xmlns="http://www.w3.org/1998/Math/MathML"> 0 0~ </math>0 4。

  1. $0:当前选择的元素
  2. $1:上一次引用
  3. $2:上上次的引用
  4. 以此类推到$4。

今天先写到这里,已经是凌晨3:05,为了肝这篇文章还是花了大概两个小时编写,周六打算去一趟香港,回来认真地写一篇更加完整更加良心整理的前端魑魅魍魉之谷歌调试提效篇(N),大家敬请期待!

说实话,要不是香港的房租太贵,我都打算去香港发展,做香港程序员职业寿命长,而且没有大佬那么卷(其实香港还是比较累的),正在考虑深圳租房香港工作的可能性,或者在香港远程办公,2024年注定是我魔幻的一年,成长最快的一年,愿每一天都比昨天更进步,钱来钱来,加油ヾ(◍°∇°◍)ノ゙

相关推荐
狂炫冰美式7 分钟前
不谈技术,搞点文化 🧀 —— 从复活一句明代残诗破局产品迭代
前端·人工智能·后端
xw51 小时前
npm几个实用命令
前端·npm
!win !1 小时前
npm几个实用命令
前端·npm
代码狂想家1 小时前
使用openEuler从零构建用户管理系统Web应用平台
前端
dorisrv2 小时前
优雅的React表单状态管理
前端
蓝瑟3 小时前
告别重复造轮子!业务组件多场景复用实战指南
前端·javascript·设计模式
dorisrv3 小时前
高性能的懒加载与无限滚动实现
前端
韭菜炒大葱3 小时前
别等了!用 Vue 3 让 AI 边想边说,字字蹦到你脸上
前端·vue.js·aigc
StarkCoder3 小时前
求求你,别在 Swift 协程开头写 guard let self = self 了!
前端
清妍_3 小时前
一文详解 Taro / 小程序 IntersectionObserver 参数
前端