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

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

相关推荐
风骏时光牛马1 小时前
生成一个AI多模态标题,仅输出一条标题,无额外文字、问句、备选、配图、文案等任何附加内容,不需要其他的任务服务 只要标题。
前端
wangruofeng1 小时前
从 GIF 到 AVIF:网页图片格式演进与 2026 年选型指南
前端·架构
清晨Coding2 小时前
为什么用 React Developer Tools 查看组件树这么乱?
前端·react.js
johnjincaaaa2 小时前
猿人学第 18 题「jsvmp 洞察先机」逆向通关实录
javascript·后端
鶴哥只手遮天3 小时前
《Electron 45.2.3 内核解剖》第 4 章 补丁体系:380 个补丁改了什么
前端·electron
FungLeo5 小时前
成为全栈·Vue 管理后台篇·分类树与标签管理:层级数据如何落到管理界面
前端·javascript·vue.js·分类树·naive ui·标签管理·前端数据结构
总要学点什么5 小时前
第108篇:三维特效-图片轨迹线效果——把贴图滚成一串箭头,想用它的本色反而整条消失
开发语言·javascript·ecmascript·gis·webgl·材质·cesium
Lank_M8 小时前
白底都占八成,PNG 为何只在图表页赢过 JPG
前端
张一凡938 小时前
给 Coding Agent 加一道"架构闸门":Jin 是如何做到"先审架构、再写代码、不漂移"的
前端·后端·agent
Linye8 小时前
AI 写的 HTML 原型全是空壳?聊聊真实 DOM 交互避坑
前端·人工智能