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

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

相关推荐
kyriewen1 小时前
你的代码仓库变成“毛线团”了?Monorepo 用 Turborepo 拆成“乐高积木”
前端·javascript·面试
身如柳絮随风扬1 小时前
你知道什么是 Ajax 吗?—— 从入门到原理,一篇彻底搞懂
前端·ajax·okhttp
旷世奇才李先生1 小时前
Vue3\+TypeScript 2026实战——企业级前端项目架构搭建与性能优化全指南
前端·架构·typescript
怕浪猫2 小时前
职场真相:稳定是陷阱,35 岁不是终点,而是重新出发的起点
面试
Beginner x_u2 小时前
前端八股整理(工程化 02)|CommonJS/ESM、Webpack Loader/Plugin 与Vite 对比
前端·webpack·node.js·plugin·loader
逻辑驱动的ken2 小时前
Java高频面试场景题25
java·开发语言·深度学习·面试·职场和发展
openKaka_2 小时前
createRoot 到底创建了什么:FiberRootNode 和 HostRootFiber 的初始化过程
前端·javascript·react.js
习明然3 小时前
UniApp开发体验感受总结
前端·uni-app
AI人工智能+电脑小能手3 小时前
【大白话说Java面试题】【Java基础篇】第32题:Java的异常处理机制是什么
java·开发语言·后端·面试
刀法如飞4 小时前
Claude Code Skills 推荐:2026年最值得安装的10个AI技能
前端·后端·ai编程