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

大家好,我是林家少爷,是一位专注于前端技术,立志成为前端技术专家的热血青年。 真不容易啊,时隔之前的高频率输出,已经足足过去了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中调试页面元素时,比如要获取元素的信息,此时就可以使用 0 0~ 0 4。

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

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

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

相关推荐
怕浪猫6 小时前
FDE 如何正确解决现场项目工程性的问题
前端·后端·ai编程
西瓜太郎12346 小时前
外层模型卡片与分组详情成功率不一致,应该怎么排查?
前端·typescript·go·软件工程·react
GreenTea7 小时前
vLLM 与 SGLang KV Cache 底层实现机制深度调研报告
前端·后端·算法
几何心凉10 小时前
没有万能模型:我用 AiiOnly Token Plan,把多款大模型的长处拼进同一个项目
前端
kyriewen10 小时前
Claude Code 的额度今天缩水了17%——官方公告上写的是"永久提高25%"
前端·ai编程·claude
雪芽蓝域zzs10 小时前
vue解构平铺VS对象包裹
前端·javascript·vue.js
风骏时光牛马11 小时前
从零到实战,完整AI学习路线
前端
三十而立洋12 小时前
深入理解 Monorepo:子包安装依赖
前端·前端工程化
IT_陈寒12 小时前
Java Stream处理大集合,我的内存怎么就炸了
前端·人工智能·后端
Captaincc12 小时前
AI 用量桌面端-桌面宠物自定义指南
前端·人工智能