Devtools 老师傅养成[3] - Console 面板
时间:2022-07-27
本文章向大家介绍Devtools 老师傅养成[3] - Console 面板,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文结构
- 本文相关
- Console面板概览
- Message
- Javascript执行环境
- 选择执行环境
- Console中的$符号
- Console下的方法
本文共计:1415字1图
预计阅读时间:2min40s
本文相关
- 本文基于 chrome 浏览器版本 73.0.3683.103(正式版本)总结
- 本文目的:关于【devtools 能做什么】建立完善的知识结构,至于怎么做,请查阅官方文档;工具类知识需要实践,建议阅读本文时打开 Devtools Sample[1]和 devtools 操作一遍
- 参考 1:google developers 官方文档[2]
- 参考 2:来自作者 Jon Kuoerman 在 FrontEndMaster 的 Mastering Chrome Developer Tools v2 课程[3]
- 参考 3:来自 作者 Tomek Sułkowski 在 medium 的系列文章[4]
- Devtools脑图.png[5]
Console面板概览
Console 面板是浏览器的控制台,也是 Devtools 的灵魂。
可以通过设置->Show Console drawer或者Esc 快捷键让 Console 在每个面板都能显示。
Message
- 在 console 中,可以看到来自浏览器/代码的五种类型的信息:
- user message
- error
- warning
- info
- verbose
- 相同的消息默认是堆叠的,可以通过 ctrl+shift+p 输入 time 命令或者设置中找到timestamps命令,给消息加上时间戳
- 通过选项Log XMLHttpRequest选择是否输出所有 XMLHttp 请求日志(可以监控页面所有 ajax 请求 定位其代码调用栈)
- 通过Hide network选择显示/隐藏网络请求的错误信息(例如 GET xxx 404)
- 通过Preserve log选择保留历史记录,即刷新页面后是否还显示先前的消息
javascript 实时执行环境
- console 除了能输出调试信息,也是一个 javascript 实时执行环境。
- 可以直接在这里输入任何全局变量名/内置对象名/函数名,会得到相应的值输出;在调试环境下的断点内,可以获取局部变量值
- 右键选Store as global variable,可以将输出值存储为一个临时的全局变量
- 双击对象的属性值,可以直接更改这个对象(持久化的更改,因为 console 存储下来的是对象的引用)
- console 中输出的 dom 元素 -> 右键 -> reveal in elements:快速定位到元素面板中的当前元素
选择执行环境
可以通过左上的下拉列表,选择不同的执行环境
top 是最外层的顶级页面,其他的是 iframe 子页面
默认情况下
- 子 frame 中:
(window === self) === self.window;
//top.window是顶级页面top的全局变量window
- top frame 中:
(((window === self) === self.window) === top) === top.window;
console 中的$
符号:
- 可以通过
$0
,获取当前在 Elements 面板所选中的元素节点 - 如果
$
在当前页面没被占用,可以用来替代 document.querySlector 方法使用
能直接返回数组(Array)
-
$_
可以引用上一次执行的结果
- 如果需要使用 npm 的包,可以安装 Console Importer 插件,用
$i
方法引入 npm 中的库
console 下的方法:
- 除了被用烂了的
console.log()
(当然 console.log 也有特别一点的用法)
- console 对象还有 console.error/clear/debug/count/time/table/tarce 等等方法
- 直接在 console 中输入 console,可以看到 console 对象下的所有方法
- 例如 console.table(obj)可以把你的对象以可视化的表格形式进行输出
- 例如可以使用 console.time()和 console.timeEnd()方法来测量时间差
- 另:console 命令行还内置了一些 API 方法,例如 queryObjects(),可以返回指定类型的对象下所有的实例化的对象
queryObjects(Object); //返回所有object对象
queryObjects(Function); //返回所有函数
queryObjects(Array); //返回所有数组
- monitor(function)方法来追踪函数调用信息,当函数被执行,会输出追踪信息
- monitorEvents(el,eventType)方法来追踪事件
- END -
- Windows下安装MongoDB
- IIS Express魔法堂:解除localhost域名的锁定
- JavaSE(三)之static、final、abstract修饰符
- 为经典版eclipse增加web and JavaEE插件
- 协议森林07 傀儡 (UDP协议)
- 【设计模式】—— 访问者模式Visitor
- JAVA EE Eclipse下配置Tomcat服务器
- CentOS6.5菜鸟之旅:文件权限详解
- CMD魔法堂:支持显示UTF8编码的中文
- 【设计模式】—— 模板方法Template
- 【设计模式】—— 策略模式Strategy
- MyBatis魔法堂:即学即用篇
- 【设计模式】—— 状态模式State
- php环境无法上传文件的解决方法
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法