前端浏览器高级调试技巧整理

简介: 前端浏览器高级调试技巧整理

1. 一键重新发起请求


场景:

在和后端联调时用的比较多,快速的重发请求,不用再在页面上点击

步骤:

选中“Network”

点击 Fetch/XHR

选择要重新发送的请求(鼠标点击一下)

右键选择Replay XHR

实操演示:

32252afa35f44cf2901a95a399d6b7a5.gif

2.在控制台快速发送请求


场景:

在和后端联调时用的比较多,快速的在控制台重发请求,不用再在页面上点击,可能会有跨域问题,这个可以给浏览器安装插件解决

步骤:

选中“Network”

点击 Fetch/XHR

选择Copy as fetch

控制台粘贴代码

修改参数,回车

实操演示:

024887d034f245b3a2c57d49c52abb2e.gif

3.复制JavaScript变量


举例一个使用场景:

后端需要你组装一个数据格式,然后你经过一系列编写逻辑代码后,通过log打印到控制台时,可以使用copy函数将这个数据发给后端。

注意:copy函数不是由 ECMAScript 定义的,而是由 Chrome 浏览器提供的。使用此功能,你可以将 js 变量的值复制,方便在其他位置使用。

090ddbfe46224adcb0578fb7dd2900e6.gif

4.控制台获取Elements面板选中的元素


场景:

对于嵌套过深的,或者三方框架等复杂结构时使用;

还可以用 $0.width这种形式获取数据

步骤:

控制台

输入$0

鼠标选择页面上的元素

控制台回车或者输入$0.XX获取属性

实操演示:

a8544f1ba0494984be6a55345f8a1810.gif

5.一键展开所有DOM元素


场景:

调试元素时,在层级比较深的情况下,一个个展开去调试会很麻烦,使用这个方法事半功倍

步骤:

alt + 鼠标点击

mac电脑是 opt + 鼠标点击

实操演示:

4fcedb354b2e444985a2df37242dab66.gif

6.引用上一次结果


场景:

对于想知道每一步结果非常有用,举个典型的例子:js的链式调用  

'xiaoMing'.split('').reverse().join('') //'gniMoaix'

步骤:

使用$_引用上一次操作的结果,不用每次都复制一遍

实操演示:

33b8f624227a4a5ca8f24cd04bdca0c4.gif

7."$"和"$$"选择器


场景

在控制台使用document.querySelectordocument.querySelectorAll选择当前页面的元素是最常见的需求了,不过着实有点太长了,咱们可以使用$$$替代。

步骤:

直接在控制台使用:

$('')代表含义是document.querySelector选择器

$$('')代表含义是document.querySelectorAll选择器

实操演示:

aad552b1a07e44958d2918e99d009cac.gif

8.$i直接在控制台安装npm


场景

有时候想使用比如dayjs(一款日期格式化插件非常好用)或者lodash(JavaScript方法库,封装了很多常用的功能函数,好用)的某个API,但是又不想去官网查,如果可以在控制台直接试出来就好了。

Console Importer 就是这么一个插件,用来在控制台直接安装npm包。

步骤:

  1. 安装Console Importer插件
  2. $i('name')安装npm包
相关文章
|
1月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
129 2
|
12天前
|
前端开发 JavaScript API
前端开发的秘密花园:这些技巧让你轻松应对各种浏览器兼容性问题!
【10月更文挑战第31天】前端开发是一个充满创意与挑战的领域,追求极致用户体验的同时,浏览器兼容性问题却时常阻碍我们前进。本文将介绍几种解决浏览器兼容性的最佳实践:使用CSS前缀、Autoprefixer工具、现代JavaScript特性与Babel转译、Polyfill与Feature Detection、响应式设计以及跨域问题处理。掌握这些技巧,助你轻松应对各种兼容性难题,创建更稳定、用户友好的网页应用。
26 3
|
12天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
21天前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
55 1
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端大模型入门:Transformer.js 和 Xenova-引领浏览器端的机器学习变革
除了调用API接口使用Transformer技术,你是否想过在浏览器中运行大模型?Xenova团队推出的Transformer.js,基于JavaScript,让开发者能在浏览器中本地加载和执行预训练模型,无需依赖服务器。该库利用WebAssembly和WebGPU技术,大幅提升性能,尤其适合隐私保护、离线应用和低延迟交互场景。无论是NLP任务还是实时文本生成,Transformer.js都提供了强大支持,成为构建浏览器AI应用的核心工具。
429 1
|
24天前
|
NoSQL 前端开发 MongoDB
前端的全栈之路Meteor篇(三):运行在浏览器端的NoSQL数据库副本-MiniMongo介绍及其前后端数据实时同步示例
MiniMongo 是 Meteor 框架中的客户端数据库组件,模拟了 MongoDB 的核心功能,允许前端开发者使用类似 MongoDB 的 API 进行数据操作。通过 Meteor 的数据同步机制,MiniMongo 与服务器端的 MongoDB 实现实时数据同步,确保数据一致性,支持发布/订阅模型和响应式数据源,适用于实时聊天、项目管理和协作工具等应用场景。
|
3月前
|
API UED 开发者
如何在Uno Platform中轻松实现流畅动画效果——从基础到优化,全方位打造用户友好的动态交互体验!
【8月更文挑战第31天】在开发跨平台应用时,确保用户界面流畅且具吸引力至关重要。Uno Platform 作为多端统一的开发框架,不仅支持跨系统应用开发,还能通过优化实现流畅动画,增强用户体验。本文探讨了Uno Platform中实现流畅动画的多个方面,包括动画基础、性能优化、实践技巧及问题排查,帮助开发者掌握具体优化策略,提升应用质量与用户满意度。通过合理利用故事板、减少布局复杂性、使用硬件加速等技术,结合异步方法与预设缓存技巧,开发者能够创建美观且流畅的动画效果。
80 0
|
14天前
|
JSON 移动开发 JavaScript
在浏览器执行js脚本的两种方式
【10月更文挑战第20天】本文介绍了在浏览器中执行HTTP请求的两种方式:`fetch`和`XMLHttpRequest`。`fetch`支持GET和POST请求,返回Promise对象,可以方便地处理异步操作。`XMLHttpRequest`则通过回调函数处理请求结果,适用于需要兼容旧浏览器的场景。文中还提供了具体的代码示例。
在浏览器执行js脚本的两种方式
|
1月前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
93 0
|
2月前
|
JavaScript 前端开发
js之浏览器对象|28
js之浏览器对象|28