前端魑魅魍魉之谷歌调试提效篇（一）

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

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

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

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

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

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

chrome开发者工具$0的用途

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

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

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

$0.__vue__.data

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

$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中调试页面元素时，比如要获取元素的信息，此时就可以使用0 0~0 4。

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

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

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