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

大家好,我是林家少爷,是一位专注于前端技术,立志成为前端技术专家的热血青年。 真不容易啊,时隔之前的高频率输出,已经足足过去了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年注定是我魔幻的一年,成长最快的一年,愿每一天都比昨天更进步,钱来钱来,加油ヾ(◍°∇°◍)ノ゙

相关推荐
NiceCloud喜云3 小时前
Opus 4.8 的 Effort Control 怎么选:Low 到 Max 五档策略
android·java·大数据·前端·c++·python·spring
wordbaby3 小时前
React Native + RNOH:跨页面数据回传的最佳实践与避坑指南
前端·react native
GISer_Jing3 小时前
Three.js着色器编译机制深度解析
javascript·webgl·着色器
丷丩3 小时前
MapLibre GL JS第22课:查看本地GeoJSON
前端·javascript·map·mapbox·maplibre gl js
jiayong233 小时前
面试中遇到不熟悉问题的应对策略深度解析
面试·职场和发展
油炸自行车3 小时前
Claude Code 错误:API Error: 400 Failed to deserialize the JSON body into the
开发语言·javascript·json·trae·claude code·api error 400
Front思4 小时前
AI前端工程师需要具备能力+
前端·人工智能·ai
JAVA社区5 小时前
Java高级全套教程(十)—— SpringCloudAlibaba超详细实战详解
java·开发语言·spring cloud·面试·职场和发展
ZC跨境爬虫6 小时前
跟着 MDN 学CSS day_29:(掌握文本与字体样式的核心艺术)
前端·css·ui·html·tensorflow
李子琪。7 小时前
网络空间安全深度实战:CSRF 漏洞原理剖析与基于 Token 的纵深防御体系构建(全栈实验报告)
前端·安全·csrf