搜索

[24352] 2015-10-05_15个必须知道的chrome开发工具技巧

文档创建者：s7ckTeam
浏览次数：5
最后更新：2025-01-18
2015-10-05_15个必须知道的chrome开发工具技巧 1 5   个 必 须 知 道 的   c h r o m e   开 发 工 具 技 巧 L i n u x 中 国   2 0 1 5 - 1 0 - 0 5 在 W e b 开 发 者 中 ， G o o g l e   C h r o m e 是 使 用 最 广 泛 的 浏 览 器 。 六 周 一 次 的 发 布 周 期 和 一 套 强 大 的 不 断 扩 大 开 发 功 能 ， 使 其 成 为 了 w e b 开 发 者 必 备 的 工 具 。 你 可 能 已 经 熟 悉 了 它 的 部 分 功 能 ， 如 使 用 c o n s o l e 和 d e b u g g e r 在 线 编 辑 C S S 。 在 这 篇 文 章 中 ， 我 们 将 分 享 1 5 个 有 助 于 改 进 你 的 开 发 流 程 的 技 巧 。 一 、 快 速 切 换 文 件 一 、 快 速 切 换 文 件 如 果 你 使 用 过 s u b l i m e   t e x t ， 那 么 你 可 能 不 习 惯 没 有 G o   t o   a n y t h i n g 这 个 功 能 的 覆 盖 。 你 会 很 高 兴 听 到 c h r o m e 开 发 者 功 能 也 有 这 个 功 能 ， 当 D e v T o o l s 被 打 开 的 时 候 ， 按 （ 在   m a c   是 ） , 就 能 快 速 搜 寻 和 打 开 你 项 目 的 文 件 。 C t r l + P c m d + p
二 、 在 源 代 码 中 搜 索 二 、 在 源 代 码 中 搜 索 如 果 你 希 望 在 源 代 码 中 搜 索 要 怎 么 办 呢 ？ 在 页 面 已 经 加 载 的 文 件 中 搜 寻 一 个 特 定 的 字 符 串 ， 快 捷 键 是 ( ) ， 这 种 搜 寻 方 式 还 支 持 正 则 表 达 式 哦 。 三 、 快 速 跳 转 到 指 定 行 三 、 快 速 跳 转 到 指 定 行 在 S o u r c e s 标 签 中 打 开 一 个 文 件 之 后 ， 在 W i n d o w s 和 L i n u x 中 ， 按 ， ( ) ， 然 后 输 入 行 号 ， D e v T o o l s 就 会 允 许 你 跳 转 到 文 件 中 的 任 意 一 行 。 C t r l   +   S h i f t   +   F C m d   +   O p t   +   F C t r l   +   G C m d   +   L
另 外 一 种 方 式 是 按 ， 输 入 和 行 数 ， 而 不 用 去 寻 找 一 个 文 件 。 四 、 在 控 制 台 选 择 元 素 四 、 在 控 制 台 选 择 元 素 D e v T o o l s 控 制 台 支 持 一 些 变 量 和 函 数 来 选 择 D O M 元 素 ： – d o c u m e n t . q u e r y S e l e c t o r ( ) 的 简 写 ， 返 回 第 一 个 和 c s s 选 择 器 匹 配 的 元 素 。 例 如 $ ( ‘ d i v ’ ) 返 回 这 个 页 面 中 第 一 个 d i v 元 素 – d o c u m e n t . q u e r y S e l e c t o r A l l ( ) 的 简 写 ， 返 回 一 个 和 c s s 选 择 器 匹 配 的 元 素 数 组 。 - – 依 次 返 回 五 个 最 近 你 在 元 素 面 板 选 择 过 的 D O M 元 素 的 历 史 记 录 ， 是 最 新 的 记 录 ， 以 此 类 推 。 C t r l   +   O : $ ( ) $ $ ( ) $ 0 $ 4 $ 0
想 要 了 解 更 多 控 制 台 命 令 ， 戳 这 里 ： C o m m a n d   L i n e   A P I 。 五 、 使 用 多 个 插 入 符 进 行 选 择 五 、 使 用 多 个 插 入 符 进 行 选 择 当 编 辑 一 个 文 件 的 时 候 ， 你 可 以 按 住 （ ） ， 在 你 要 编 辑 的 地 方 点 击 鼠 标 ， 可 以 设 置 多 个 插 入 符 ， 这 样 可 以 一 次 在 多 个 地 方 编 辑 。 六 、 保 存 记 录 六 、 保 存 记 录 勾 选 在 C o n s o l e 标 签 下 的 保 存 记 录 选 项 ， 你 可 以 使 D e v T o o l s 的 c o n s o l e 继 续 保 存 记 录 而 不 会 在 每 个 页 面 加 载 之 后 清 除 记 录 。 当 你 想 要 研 究 在 页 面 还 没 加 载 完 之 前 出 现 的 b u g 时 ， 这 会 是 一 个 很 方 便 的 方 法 。 七 、 优 质 打 印 七 、 优 质 打 印 C h r o m e ’ s   D e v e l o p e r   T o o l s 有 内 建 的 美 化 代 码 ， 可 以 返 回 一 段 最 小 化 且 格 式 易 读 的 代 码 。 P r e t t y   P r i n t 的 按 钮 在 S o u r c e s 标 签 的 左 下 角 。 C t r l c m d
八 、 设 备 模 式 八 、 设 备 模 式 对 于 开 发 移 动 友 好 页 面 ， D e v T o o l s 包 含 了 一 个 非 常 强 大 的 模 式 ， 这 个 谷 歌 视 频 介 绍 了 其 主 要 特 点 ， 如 调 整 屏 幕 大 小 、 触 摸 仿 真 和 模 拟 糟 糕 的 网 络 连 接 。 h t t p s : / / d n - l i n u x c n . q b o x . m e / s t a t i c / v i d e o / D e v B y t e s % 2 0 % 2 0 C h r o m e % 2 0 D e v T o o l s % 2 0 D e v i c e % 2 0 M o d e . m p 4 九 、 设 备 传 感 仿 真 九 、 设 备 传 感 仿 真 设 备 模 式 的 另 一 个 很 酷 的 功 能 是 模 拟 移 动 设 备 的 传 感 器 ， 例 如 触 摸 屏 幕 和 加 速 计 。 你 甚 至 可 以 恶 搞 你 的 地 理 位 置 。 这 个 功 能 位 于 元 素 标 签 的 底 部 ， 点 击 “ s h o w   d r a w e r ” 按 钮 ， 就 可 看 见   E m u l a t i o n 标 签   - - >   S e n s o r s . 十 、 颜 色 选 择 器 十 、 颜 色 选 择 器 当 在 样 式 编 辑 中 选 择 了 一 个 颜 色 属 性 时 ， 你 可 以 点 击 颜 色 预 览 ， 就 会 弹 出 一 个 颜 色 选 择 器 。 当 选 择 器 开 启 时 ， 如 果 你 停 留 在 页 面 ， 鼠 标 指 针 会 变 成 一 个 放 大 镜 ， 让 你 去 选 择 像 素 精 度 的 颜 色 。
十 一 、 强 制 改 变 元 素 状 态 十 一 、 强 制 改 变 元 素 状 态 D e v T o o l s 有 一 个 可 以 模 拟 C S S 状 态 的 功 能 ， 例 如 元 素 的 h o v e r 和 f o c u s , 可 以 很 容 易 的 改 变 元 素 样 式 。 在 C S S 编 辑 器 中 可 以 利 用 这 个 功 能 十 二 、 可 视 化 的 十 二 、 可 视 化 的 D O M 阴 影 阴 影 W e b 浏 览 器 在 构 建 如 文 本 框 、 按 钮 和 输 入 框 一 类 元 素 时 ， 其 它 基 本 元 素 的 视 图 是 隐 藏 的 。 不 过 ， 你 可 以 在 S e t t i n g s   - >   G e n e r a l   中 切 换 成 S h o w u s e r   a g e n t   s h a d o w   D O M ， 这 样 就 会 在 元 素 标 签 页 中 显 示 被 隐 藏 的 代 码 。 甚 至 还 能 单 独 设 计 他 们 的 样 式 ， 这 给 你 了 很 大 的 控 制 权 。
十 三 、 选 择 下 一 个 匹 配 项 十 三 、 选 择 下 一 个 匹 配 项 当 在 S o u r c e s 标 签 下 编 辑 文 件 时 ， 按 下 ( )   ， 当 前 选 中 的 单 词 的 下 一 个 匹 配 也 会 被 选 中 ， 有 利 于 你 同 时 对 它 们 进 行 编 辑 。 十 四 、 改 变 颜 色 格 式 十 四 、 改 变 颜 色 格 式 在 颜 色 预 览 功 能 使 用 快 捷 键 +   点 击 ， 可 以 在 r g b a 、 h s l 和 h e x a d e c i m a l 来 回 切 换 颜 色 的 格 式 十 五 、 通 过 十 五 、 通 过 w o r k s p a c e s 来 编 辑 本 地 文 件 来 编 辑 本 地 文 件 W o r k s p a c e s 是 C h r o m e   D e v T o o l s 的 一 个 强 大 功 能 ， 这 使 D e v T o o l s 变 成 了 一 个 真 正 的 I D E 。 W o r k s p a c e s 会 将 S o u r c e s 选 项 卡 中 的 文 件 和 本 地 项 目 中 的 文 件 进 行 匹 配 ， 所 以 你 可 以 直 接 编 辑 和 保 存 ， 而 不 必 复 制 / 粘 贴 外 部 改 变 的 文 件 到 编 辑 器 。 为 了 配 置 W o r k s p a c e s ， 只 需 打 开 S o u r c e s 选 项 ， 然 后 右 击 左 边 面 板 的 任 何 一 个 地 方 ， 选 择   A d d   F o l d e r   T o   W o r s k p a c e ， ， 或 者 只 是 把 你 的 整 个 工 程 文 件 夹 拖 放 入 D e v e l o p e r   T o o l 。 现 在 ， 无 论 在 哪 一 个 文 件 夹 ， 被 选 中 的 文 件 夹 ， 包 括 其 子 目 录 和 所 有 文 件 都 可 以 被 编 辑 。 为 了 让 C t r l   +   D C m d   +   D S h i f t
来 源 ： 淡 忘 ~ 浅 思 原 文 ： h t t p : / / t u t o r i a l z i n e . c o m / 2 0 1 5 / 0 3 / 1 5 - m u s t - k n o w - c h r o m e - d e v t o o l s - t i p s - t r i c k s / 作 者 ：   D a n n y   M a r k o v 译 文 ： h t t p : / / w w w . i d o 3 2 1 . c o m / 1 4 9 7 . h t m l 译 者 ：   d w q s W o r k s p a c e s 更 高 效 ， 你 可 以 将 页 面 中 用 到 的 文 件 映 射 到 相 应 的 文 件 夹 ， 允 许 在 线 编 辑 和 简 单 的 保 存 。 了 解 更 多 关 于 W o r k s p a c e s 的 使 用 ， 戳 这 里 ： W o r k s p a c e s 。 阅 读 原 文
回复

举报

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

本版积分规则

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

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