前端开发调试之 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

相关推荐
baiduguoyun8 分钟前
react的import 导入语句中的特殊符号
前端·react.js
前端青山9 分钟前
webpack指南
开发语言·前端·javascript·webpack·前端框架
NiNg_1_23421 分钟前
ECharts实现数据可视化入门详解
前端·信息可视化·echarts
nukix23 分钟前
Mac Java 使用 tesseract 进行 ORC 识别
java·开发语言·macos·orc
XiaoLeisj33 分钟前
【JavaEE初阶 — 多线程】内存可见性问题 & volatile
java·开发语言·java-ee
Lizhihao_1 小时前
JAVA-队列
java·开发语言
励志前端小黑哥1 小时前
有了Miniconda,再也不用担心nodejs、python、go的版本问题了
前端·python
喵叔哟1 小时前
重构代码之取消临时字段
java·前端·重构
远望清一色1 小时前
基于MATLAB边缘检测博文
开发语言·算法·matlab
何曾参静谧1 小时前
「Py」Python基础篇 之 Python都可以做哪些自动化?
开发语言·python·自动化