搜索

[23091] 2014-09-18_Chrome控制台不完全指南

文档创建者：s7ckTeam
浏览次数：8
最后更新：2025-01-18
2014-09-18_Chrome控制台不完全指南 C h r o m e   控 制 台 不 完 全 指 南 L i n u x 中 国   2 0 1 4 - 0 9 - 1 8 C h r o m e 的 开 发 者 工 具 已 经 强 大 到 没 朋 友 的 地 步 了 ， 特 别 是 其 功 能 丰 富 界 面 友 好 的 c o n s o l e ， 使 用 得 当 可 以 有 如 下 功 效 ： 更 高 「 逼 格 」 更 快 「 开 发 调 试 」 更 强 「 进 阶 级 的 F r o n t e n d e r 」 B u g 无 处 遁 形 「 C o n s o l e 大 法 好 」 c o n s o l e . l o g 大 家 都 会 用 l o g ， 但 鲜 有 人 很 好 地 利 用 c o n s o l e . e r r o r   ,   c o n s o l e . w a r n   等 将 输 出 到 控 制 台 的 信 息 进 行 分 类 整 理 。 他 们 功 能 区 别 不 大 ， 意 义 在 于 将 输 出 到 控 制 台 的 信 息 进 行 归 类 ， 或 者 说 让 它 们 更 语 义 化 。 各 个 所 代 表 的 语 义 如 下 ： c o n s o l e . l o g ： 普 通 信 息 c o n s o l e . i n f o ： 提 示 类 信 息 c o n s o l e . e r r o r ： 错 误 信 息 c o n s o l e . w a r n ： 警 示 信 息 当 合 理 使 用 上 述 l o g 方 法 后 ， 可 以 很 方 便 地 在 控 制 台 选 择 查 看 特 定 类 型 的 信 息 。 c o n s o l e . l o g ( ' 一 颗 红 心 向 太 阳 ' , ' 吼 吼 ~ ' ) ; c o n s o l e . i n f o ( ' 楼 上 药 不 能 停 ！ ' ) ; c o n s o l e . w a r n ( ' 楼 上 嘴 太 贱 ！ ' ) ; c o n s o l e . e r r o r ( ' 楼 上 关 你 毛 事 ？ ' ) ;
如 果 再 配 合 c o n s o l e . g r o u p   与 c o n s o l e . g r o u p E n d ， 可 以 将 这 种 分 类 管 理 的 思 想 发 挥 到 极 致 。 这 适 合 于 在 开 发 一 个 规 模 很 大 模 块 很 多 很 复 杂 的 W e b A P P 时 ， 将 各 自 的 l o g 信 息 分 组 到 以 各 自 命 名 空 间 为 名 称 的 组 里 面 。 c o n s o l e . g r o u p ( " a p p . f o o " ) ; c o n s o l e . l o g ( " 来 自 f o o 模 块 的 信 息   b l a h   b l a h   b l a h . . . " ) ; c o n s o l e . g r o u p E n d ( ) ; c o n s o l e . g r o u p ( " a p p . b a r " ) ; c o n s o l e . l o g ( " 来 自 b a r 模 块 的 信 息   b l a h   b l a h   b l a h . . . " ) ; c o n s o l e . g r o u p E n d ( ) ; 而 关 于 c o n s o l e . l o g ， 早 已 被 玩 儿 坏 了 。 一 切 都 源 于 C h r o m e 提 供 了 这 么 一 个 A P I ： 第 一 个 参 数 可 以 包 含 一 些 格 式 化 的 指 令 比 如 % c 。 比 如 给 h e l l o   w o r l d   做 件 漂 亮 的 嫁 衣 再 拉 出 来 见 人 ： c o n s o l e . l o g ( ' % c h e l l o   w o r l d ' , ' f o n t - s i z e : 2 5 p x ; l i n e - h e i g h t : 4 5 p x ; ; c o l o r : r e d ; ' ) ; 如 果 你 觉 得 不 够 过 瘾 ， 那 就 把 你 能 写 出 来 的 最 华 丽 的 C S S 样 式 都 应 用 上 吧 ， 比 如 渐 变 。 于 是 你 可 以 得 到 如 下 华 丽 丽 的 效 果 ： c o n s o l e . l o g ( ' % c h e l l o   w o r l d ' ,   ' b a c k g r o u n d - i m a g e : - w e b k i t - g r a d i e n t (   l i n e a r ,   l e f t   t o p ,   r i g h t   t o p ,   c o l o r - s t o p ( 0 ,   # f 2 2 ) ,   c o l o r - s t o p ( 0 . 1 5 ,   # f 2 f ) ,   c o l o r - s t o p ( 0 . 3 ,   # 2 2 f ) ,   c o l o r - s t o p ( 0 . 4 5 ,   # 2 f f ) ,   c o l o r - s t o p ( 0 . 6 ,   # 2 f 2 ) , c o l o r - s t o p ( 0 . 7 5 ,   # 2 f 2 ) ,   c o l o r - s t o p ( 0 . 9 ,   # f f 2 ) ,   c o l o r - s t o p ( 1 ,   # f 2 2 )  
) ; c o l o r : t r a n s p a r e n t ; - w e b k i t - b a c k g r o u n d - c l i p :   t e x t ; f o n t - s i z e : 5 e m ; ' ) ; 各 种 招 大 招 的 节 奏 啊 ~ 看 着 上 面 密 集 的 代 码 不 用 惊 慌 ， 上 面 c o n s o l e . l o g ( ) 第 二 个 参 数 全 是 纯 C S S 用 来 控 制 样 式 的 ， 你 不 会 陌 生 。 而 第 一 个 参 数 里 可 以 带 用 百 分 号 开 头 的 转 义 指 令 ， 如 上 面 输 出 带 样 式 的 文 字 时 使 用 的 % c 指 令 。 更 详 细 的 指 令 参 见 官 方 A P I 文 档 的 这 个 表 格 。 如 果 还 不 够 过 瘾 ， 那 咱 们 来 l o g 一 些 图 片 吧 ， 甚 至 。 。 。 动 图 ？ 对 ， 你 得 先 有 图 ， 我 们 拿 这 张 图 为 例 。 c o n s o l e . l o g ( " % c " ,   " p a d d i n g : 5 0 p x   3 0 0 p x ; l i n e - h e i g h t : 1 2 0 p x ; b a c k g r o u n d : u r l ( ' h t t p : / / w a y o u . g i t h u b . i o / 2 0 1 4 / 0 9 / 1 0 / c h r o m e - c o n s o l e - t i p s - a n d - t r i c k s / r a b b i t . g i f ' )   n o - r e p e a t ; " ) ; 看 着 上 面 摇 摆 的 豆 比 兔 是 不 是 有 种 抽 它 一 脸 的 冲 动 。 除 此 ， c o n s o l e . t a b l e   更 是 直 接 以 表 格 的 形 式 将 数 据 输 出 ， 不 能 赞 得 太 多 ！ 借 用 之 前 写 过 的 一 篇 博 文 里 的 例 子 ： v a r   d a t a   =   [ { ' 品 名 ' :   ' 杜 雷 斯 ' ,   ' 数 量 ' :   4 } ,   { ' 品 名 ' :   ' 冈 本 ' ,   ' 数 量 ' :   3 } ] ; c o n s o l e . t a b l e ( d a t a ) ;
另 外 ， c o n s o l e . l o g ( )   接 收 不 定 参 数 ， 参 数 间 用 逗 号 分 隔 ， 最 终 会 输 出 会 将 它 们 以 空 白 字 符 连 接 。 c o n s o l e . l o g ( ' % c 你 好 ' , ' c o l o r : r e d ; ' , ' 小 明 ' , ' 你 知 道 小 红 被 妈 妈 打 了 么 ' ) ; c o n s o l e . a s s e r t 当 你 想 代 码 满 足 某 些 条 件 时 才 输 出 信 息 到 控 制 台 ， 那 么 你 大 可 不 必 写 i f 或 者 三 元 表 达 式 来 达 到 目 的 ， c o s o l e . a s s e r t 便 是 这 样 场 景 下 一 种 很 好 的 工 具 ， 它 会 先 对 传 入 的 表 达 式 进 行 断 言 ， 只 有 表 达 式 为 假 时 才 输 出 相 应 信 息 到 控 制 台 。 v a r   i s D e b u g = f a l s e ; c o n s o l e . a s s e r t ( i s D e b u g , ' 开 发 中 的 l o g 信 息 。 。 。 ' ) ; c o n s o l e . c o u n t 除 了 条 件 输 出 的 场 景 ， 还 有 常 见 的 场 景 是 计 数 。 当 你 想 统 计 某 段 代 码 执 行 了 多 少 次 时 也 大 可 不 必 自 己 去 写 相 关 逻 辑 ， 内 置 的 c o n s o l e . c o u n t 可 以 很 地 胜 任 这 样 的 任 务 。 f u n c t i o n   f o o ( ) {   / / 其 他 函 数 逻 辑 b l a h   b l a h 。 。 。   c o n s o l e . c o u n t ( ' f o o   被 执 行 的 次 数 ： ' ) ; } f o o ( ) ; f o o ( ) ; f o o ( ) ; c o n s o l e . d i r 将 D O M 结 点 以 J a v a S c r i p t 对 象 的 形 式 输 出 到 控 制 台
而 c o n s o l e . l o g 是 直 接 将 该 D O M 结 点 以 D O M 树 的 结 构 进 行 输 出 ， 与 在 元 素 审 查 时 看 到 的 结 构 是 一 致 的 。 不 同 的 展 现 形 式 ， 同 样 的 优 雅 ， 各 种 体 位 任 君 选 择 反 正 就 是 方 便 与 体 贴 。 c o n s o l e . d i r ( d o c u m e n t . b o d y ) ; c o n s o l e . l o g ( d o c u m e n t . b o d y ) ; c o n s o l e . t i m e   &   c o n s o l e . t i m e E n d 输 出 一 些 调 试 信 息 是 控 制 台 最 常 用 的 功 能 ， 当 然 ， 它 的 功 能 远 不 止 于 此 。 当 做 一 些 性 能 测 试 时 ， 同 样 可 以 在 这 里 很 方 便 地 进 行 。 比 如 需 要 考 量 一 段 代 码 执 行 的 耗 时 情 况 时 ， 可 以 用 c o n s o l e . t i m e 与   c o n s o l e . t i m e E n d 来 做 此 事 。 这 里 借 用 官 方 文 档 的 例 子 ： c o n s o l e . t i m e ( " A r r a y   i n i t i a l i z e " ) ; v a r   a r r a y =   n e w   A r r a y ( 1 0 0 0 0 0 0 ) ; f o r   ( v a r   i   =   a r r a y . l e n g t h   -   1 ;   i   > =   0 ;   i - - )   {         a r r a y [ i ]   =   n e w   O b j e c t ( ) ;         } c o n s o l e . t i m e E n d ( " A r r a y   i n i t i a l i z e " ) ; 当 然 ， 我 们 也 可 以 选 择 自 己 写 代 码 来 计 时 ： v a r   s t a r t = n e w   D a t e ( ) . g e t T i m e ( ) ; v a r   a r r a y =   n e w   A r r a y ( 1 0 0 0 0 0 0 ) ; f o r   ( v a r   i   =   a r r a y . l e n g t h   -   1 ;   i   > =   0 ;   i - - )   {         a r r a y [ i ]   =   n e w   O b j e c t ( ) ; } ; c o n s o l e . l o g ( n e w   D a t e ( ) . g e t T i m e ( ) - s t a r t ) ;
相 信 你 也 看 到 了 ， 用 内 置 的 c o n s o l e . t i m e 是 多 么 地 方 便 ， 省 去 了 自 己 写 代 码 来 计 算 的 工 作 量 。 另 外 值 得 一 提 的 是 ， 通 过 调 用 内 置 的 c o n s o l e . t i m e 得 到 的 结 果 要 比 自 己 手 动 计 算 的 时 间 差 更 精 确 可 靠 。 c o n s o l e . p r o f i l e   &   c o n s o l e . t i m e L i m e 当 想 要 查 看 C P U 使 用 相 关 的 信 息 时 ， 可 以 使 用 c o n s o l e . p r o f i l e 配 合   c o n s o l e . p r o f i l e E n d 来 完 成 这 个 需 求 。 这 一 功 能 可 以 通 过 U I 界 面 来 完 成 ， C h r o m e   开 发 者 工 具 里 面 有 个 t a b 便 是 P r o f i l e 。 与 此 类 似 的 功 能 还 有 c o n s o l e . t i m e L i n e 配 合   c o n s o l e . t i m e L i n e E n d , 它 的 作 用 是 开 始 记 录 一 段 时 间 轴 ， 同 样 可 以 通 过 C h r o m e 开 发 者 工 具 里 的 T i m e l i n e   标 签 来 进 行 相 应 操 作 。 所 以 在 我 看 来 这 两 个 方 法 有 点 鸡 肋 ， 因 为 都 可 以 通 过 操 作 界 面 来 完 成 。 但 至 少 他 提 供 了 一 种 命 令 行 方 式 的 交 互 ， 还 是 多 了 种 姿 势 供 选 择 吧 。 c o n s o l e . t r a c e 堆 栈 跟 踪 相 关 的 调 试 可 以 使 用 c o n s o l e . t r a c e 。 这 个 同 样 可 以 通 过 U I 界 面 完 成 。 当 代 码 被 打 断 点 后 ， 可 以 在 C a l l   S t a c k 面 板 中 查 看 相 关 堆 栈 信 息 。 上 面 介 绍 的 都 是 挂 在 w i n d o w . c o n s o l e 这 个 对 象 下 面 的 方 法 ， 统 称 为 C o n s o l e   A P I ， 接 下 来 的 这 些 方 法 确 切 地 说 应 该 叫 命 令 ， 是 C h r o m e 内 置 提 供 ， 在 控 制 台 中 使 用 的 ， 他 们 统 称 为 C o m m a n d   L i n e   A P I 。 $ 似 乎 美 刀 总 是 被 程 序 员 及 各 种 编 程 语 言 所 青 睐 「 你 看 看 P H P 代 码 就 知 道 P H P e r 有 多 爱 钱 了 」 ， 在 C h r o m e 的 控 制 台 里 ， $ 用 处 还 真 是 蛮 多 且 方 便 的 。 $ _ 命 令 返 回 最 近 一 次 表 达 式 执 行 的 结 果 ， 功 能 跟 按 向 上 的 方 向 键 再 回 车 是 一 样 的 ， 但 它 可 以 做 为 一 个 变 量 使 用 在 你 接 下 来 的 表 达 式 中 ： 2 + 2 / / 回 车 ， 再 $ _ + 1 / / 回 车 得 5 上 面 的 $ _ 需 要 领 悟 其 奥 义 才 能 使 用 得 当 ， 而 $ 0 ~ $ 4 则 代 表 了 最 近 5 个 你 选 择 过 的 D O M 节 点 。 什 么 意 思 ？ 在 页 面 右 击 选 择 审 查 元 素 ， 然 后 在 弹 出 来 的 D O M 结 点 树 上 面 随 便 点 选 ， 这 些 被 点 过 的 节 点 会 被 记 录 下 来 ， 而 $ 0 会 返 回 最 近 一 次 点 选 的 D O M 结 点 ， 以 此 类 推 ， $ 1 返 回 的 是 上 上 次 点 选 的 D O M 节 点 ， 最 多 保 存 了 5 个 ， 如 果 不 够 5 个 ， 则 返 回 u n d e f i n e d 。
另 外 值 得 一 赞 的 是 ， C h r o m e   控 制 台 中 原 生 支 持 类 j Q u e r y 的 选 择 器 ， 也 就 是 说 你 可 以 用 $ 加 上 熟 悉 的 c s s 选 择 器 来 选 择 D O M 节 点 ， 多 么 滴 熟 悉 。 $ ( ' b o d y ' ) $ ( s e l e c t o r ) 返 回 的 是 满 足 选 择 条 件 的 首 个 D O M 元 素 。 剥 去 她 伪 善 的 外 衣 ， 其 实 $ ( s e l e c t o r ) 是 原 生 J a v a S c r i p t   d o c u m e n t . q u e r y S e l e c t o r ( )   的 封 装 。 同 时 另 一 个 命 令 $ $ ( s e l e c t o r ) 返 回 的 是 所 有 满 足 选 择 条 件 的 元 素 的 一 个 集 合 ， 是 对 d o c u m e n t . q u e r y S e l e c t o r A l l ( )   的 封 装 。 $ $ ( ' d i v ' ) c o p y 通 过 此 命 令 可 以 将 在 控 制 台 获 取 到 的 内 容 复 制 到 剪 贴 板 。 c o p y ( d o c u m e n t . b o d y ) 然 后 你 就 可 以 到 处 粘 了 ：
看 完 此 条 命 令 行 ， 机 智 的 你 是 不 是 跟 脑 洞 全 开 的 我 一 样 ， 冒 出 了 这 样 一 个 想 法 ： 那 就 是 通 过 这 个 命 令 可 以 在 J a v a S c r i p t 里 进 行 复 制 操 作 从 而 不 用 依 赖 F l a s h 插 件 了 。 B u t 现 实 是 残 酷 的 ， 如 之 前 所 述 的 ， 这 里 的 控 制 台 命 令 只 能 在 控 制 台 中 环 境 中 执 行 ， 因 为 他 不 依 附 于 任 何 全 局 变 量 比 如 w i n d o w ， 所 以 其 实 在 J S 代 码 里 是 访 问 不 了 这 个 c o p y 方 法 的 ， 所 以 从 代 码 层 面 来 调 用 复 制 功 能 也 就 无 从 谈 起 。 但 愿 有 天 浏 览 器 会 提 供 相 应 的 J S 实 现 吧 ~ k e y s   &   v a l u e s 这 是 一 对 基 友 。 前 者 返 回 传 入 对 象 所 有 属 性 名 组 成 的 数 据 ， 后 者 返 回 所 有 属 性 值 组 成 的 数 组 。 具 体 请 看 下 面 的 例 子 ： v a r   t b o y = { n a m e : ' w a y o u ' , g e n d e r : ' u n k n o w n ' , h o b b y : ' o p p o s i t e   t o   t h e   g e n d e r ' } ; k e y s ( t b o y ) ; v a l u e s ( t b o y ) ; m o n i t o r   &   u n m o n i t o r m o n i t o r ( f u n c t i o n ) ， 它 接 收 一 个 函 数 名 作 为 参 数 ， 比 如 f u n c t i o n   a , 每 次 a 被 执 行 了 ， 都 会 在 控 制 台 输 出 一 条 信 息 ， 里 面 包 含 了 函 数 的 名 称 a 及 执 行 时 所 传 入 的 参 数 。 而 u n m o n i t o r ( f u n c t i o n ) 便 是 用 来 停 止 这 一 监 听 。 f u n c t i o n   s a y H e l l o ( n a m e ) {   a l e r t ( ' h e l l o , ' + n a m e ) ; } m o n i t o r ( s a y H e l l o ) ; s a y H e l l o ( ' w a y o u ' ) ; u n m o n i t o r ( s a y H e l l o ) ; s a y H e l l o ( ' w a y o u ' ) ; d e b u g   &   u n d e b u g
d e b u g 同 样 也 是 接 收 一 个 函 数 名 作 为 参 数 。 当 该 函 数 执 行 时 自 动 断 下 来 以 供 调 试 ， 类 似 于 在 该 函 数 的 入 口 处 打 了 个 断 点 ， 可 以 通 过 d e b u g g e r 来 做 到 ， 同 时 也 可 以 通 过 在 C h r o m e 开 发 者 工 具 里 找 到 相 应 源 码 然 后 手 动 打 断 点 。 而 u n d e b u g   则 是 解 除 该 断 点 。 而 其 他 还 有 好 些 命 令 则 让 人 没 有 说 的 欲 望 ， 因 为 好 些 都 可 以 通 过 C h r o m e 开 发 者 工 具 的 U I 界 面 来 操 作 并 且 比 用 在 控 制 台 输 入 要 方 便 。 R E F E R E N C E S t y l e d   c o n s o l e   l o g g i n g   i n   t h e   C h r o m e   D e v T o o l s   ( C a n a r y ) C h r o m e   C o n s o l e   A P I C h r o m e   C o n s o l e   C o m m a n d   L i n e   A P I 阅 读 原 文
回复

举报

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

使用Markdown编辑器编辑 使用富文本编辑器编辑

Archiver| 手机版| 小黑屋|
Powered by Discuz! X3.4 Copyright © 2001-2020, Tencent Cloud. 商业源码建议获取授权，如侵犯您的权益，请联系客服处理