前端调试【详解】含debugger,console,断点,手机真机调试等

devtools/2025/1/22 4:41:55/

Web 端

alert 调试 - 阻塞

【重要】debugger 调试 - 阻塞

https://blog.csdn.net/weixin_41192489/article/details/123872064

控制台 API 调试

https://blog.csdn.net/weixin_41192489/article/details/123872064

【重要】console 调试

https://blog.csdn.net/weixin_41192489/article/details/123866661

【重要】断点调试

https://blog.csdn.net/weixin_41192489/article/details/124688086

Vue DevTools

限 vue 项目,必要的设置如下图

在这里插入图片描述

React DevTools

限 React 项目

移动端

手机真机调试本地前端

https://blog.csdn.net/weixin_41192489/article/details/118918591

移动端调试包

  • vConsole【推荐,腾讯开发】
  • Eruda【推荐】
  • Whistle – 推荐
  • JsConsole – 不推荐
  • Weinre – 不更新了
  • Spy-debugger —般

抓包工具

  • Wireshark【推荐】
  • Charles【限 Mac】
  • Fiddler【限 Windows】
  • mitmproxy

内网穿透方案

  • frp
  • ngrok
  • localtunnel
  • webhook.site
  • smee.io

性能调试

  • Lighthouse
  • WebPageTest
  • PageSpeed Insights

清除网页缓存

  • 使用浏览器的无痕模式
  • 调试插件的设置中,启用无痕模式
    在这里插入图片描述

清除网络缓存

在这里插入图片描述

查看网速较慢时的效果

在这里插入图片描述


http://www.ppmy.cn/devtools/152500.html

相关文章

R 语言科研绘图第 20 期 --- 箱线图-配对

在发表科研论文的过程中,科研绘图是必不可少的,一张好看的图形会是文章很大的加分项。 为了便于使用,本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中,获取方式: R 语言科研绘图模板 --- sciRplothttps://mp.…

Solidity03 Solidity变量简述

文章目录 一、变量简述1.1 状态变量1.2 局部变量1.3 全局变量1.4 注意问题 二、变量可见性2.1 public2.2 private2.3 internal2.4 默认可见性2.5 可见性的用处 三、变量初始值3.1 值类型初始值 一、变量简述 变量是指可以保存数据的内部存储单元,里面的数据可以在程…

jenkins-api操作

一. 简述: 在一个比较复杂的环境中, 往往会有自己开发的运维管理平台。在代码发布这块,尽管jenkins有一个比较方便的UI, 但很多团队还是喜欢集中式管理, 将发布功能(仅仅把jenkins作为一个发布组件使用)嵌入运维管理平…

【Spring MVC】如何运用应用分层思想实现简单图书管理系统前后端交互工作

前言 🌟🌟本期讲解关于SpringMVC的编程思想之应用分层~~~ 🌈感兴趣的小伙伴看一看小编主页:GGBondlctrl-CSDN博客 🔥 你的点赞就是小编不断更新的最大动力 🎆那…

数据库的DQL(3)

数据库的DQL(3) 分组查询 在MySQL中,group by关键字可以根据一个或多个字段对查询结果进行分组 group by 字段名1.分组函数 有时也叫聚合函数 count(): 查询表中的记录数量avg(): 求平均值sum(): 求和max():求最大值min():求最小值 案例1: mysql&g…

深入解析人工智能中的协同过滤算法及其在推荐系统中的应用与优化

目录 什么是协同过滤算法核心原理基本步骤相似度计算代码实现详解1.流程图2.创建基础的数据结构存储用户评分数据3.计算用户相似度4.获取相似用户5.推荐方法 算法优化建议1. 数据预处理优化去除异常值和噪声数据进行数据标准化使用稀疏矩阵优化存储 2. 相似度计算优化使用局部敏…

STM32使用DSP库 Keil方式添加

文章目录 前言一、添加DSP库二、使能FPU及配置1. 使能FPU2. 增加编译的宏3.增加头文件的检索路径三. 验证1. 源码中添加2.代码测试前言 添加DSP有两种方案,本文采用的是是Keil 中添加。 一、添加DSP库 在创建好的工程中添加DSP库:步骤如下: 步骤1:选择运行环境管理; 步…

Spring参数校验,数组入参校验 :List<E>

1、程序内直接校验 参数进入控制层方法,使用具体的参数方法来验证,灵活不优雅 Objects.isNull() String.isEmpty()2、验证 单对象(Obj)使用 Validated 优雅,不灵活,对象类配置多 首先在对象类中 1、校验…