前端开发调试之 PC 端调试

以下内容来自稀土掘金青训营课程

bug 与 debug

  • 点击.cls开启动态修改元素的class
  • 输入字符串可以动态的给元素添加类名
  • 勾选/取消类名可以动态的查看类名生效效果
  • 点击具体的样式值(字号、颜色、宽度高度等)可以进行编辑,浏览器内容区域实时预览
  • Computed下点击样式里的箭头可以跳转到styles面板中的css规则

console

  • console.log
  • console.warn
  • console.error
  • console.debug
  • console.info
  • console.table 具像化的展示SON和数组数据
  • console.dir 通过类以文件树的方式展示对象的属性
  • 占位符:给日志添加样式,可以突出重要的信息 %s:字符串占位符;%o:对象占位符,%c:样式占位符;%d:数字占位符

source tab

performance

示例:https://googlechrome.github.io/devtools-samples/jank/

lighthouse

相关推荐
TeamDev3 分钟前
使用 JxBrowser 在桌面应用中集成 Spring
java·前端·后端·spring·混合应用·jxbrowser·浏览器控件
J.YA10 分钟前
String字符串[面试题]
java·开发语言
陈随易1 小时前
Rolldown 把插件改动回传提速 26 倍
前端·后端·程序员
笃行3509 小时前
集中式与分布式,KingbaseES 的四种形态共用一套内核
前端
陈随易10 小时前
Vue 编译器换掉 source map,快了三四成
前端·后端·程序员
xiaoye-duck11 小时前
《C++ 项目:手写大模型接入 SDK》Gemini接口设计(上):初始化、全量响应实现和测试
开发语言·网络·c++·语言模型
ZhengEnCi11 小时前
12 种高级 UI 交互效果及对应 AI 提示词:从按压回弹到底部抽屉的物理感教学
前端·css·交互设计
nice_lcj52013 小时前
Java Lambda 表达式入门:怎么写、怎么用、常用方法有哪些
java·开发语言·后端·面试
码农小河6614 小时前
基于SSM+JSP+MySQL的在线医疗服务系统的设计与实现
java·开发语言·mysql
IT_陈寒14 小时前
Redis大key删除为什么会导致服务卡顿?我的线上事故复盘
前端·人工智能·后端