前面的话

  对于chrome调试工具，常用的是elements标签、console标签、sources标签和network标签。但实际上，还有一些不太常见但相当实用的方法可以提高网页调试效率。本文将详细介绍那些不常见的chrome调试工具使用方法

刷新

  一般地，人们对于刷新的印象只是停留在使用F5快捷键上。但实际上，刷新包括三种。在开发者调试工具打开的情况下，长按刷新按钮，会出现这三种刷新选项

搜索

  在elements标签下使用ctrl+f搜索功能，可以使用css选择器，如'.test'，所以搜索到所有类名为test的元素

计算样式

  通过点击elements标签右侧的computed子标签，可以查看元素计算后的样式

资源映射

  使用chrome浏览器的sourcemap功能可以将本地的文件和服务器上的文件关联起来。这样，通过chrome的开发者工具调试网页(如更改一个css属性值)时，本地文件的内容也会相应地发生变化并保存。如果再使用sass的watch命令， 在调试sass文件时，就可以实时保存文件并通过浏览器看到效果

  如下图所示，点击map to network resource，把本地文件关联到服务器上相应文件。浏览器会智能地把项目目录下的其他css文件和html文件和服务器上对应的文件都关联起来

当前位置

  在elements标签下，选择元素节点，点击右键菜单中的scroll into view，可以滚动浏览器到元素所处位置

不常见但很有用的chrome调试工具使用方法的更多相关文章

  1. Linux 的shell 字符串截取很有用。有八种方法。

    一 Linux 的字符串截取很有用.有八种方法. 假设有变量 var=http://www.linuxidc.com/123.htm 1  # 号截取,删除左边字符,保留右边字符. echo ${va ...

  2. 8 个不常见但很有用的 Git 命令

    1. 拉取远程代码并且覆盖本地更改 2. 列出远程和本地所有分支 3. 强制更新远程分支 4. 回滚一个 merge 5. 修改之前的提交记录或者很久前提交的记录 6. 使用多个远程代码库,并且使用多 ...

  3. 一些不太常见但很有用的java类

    java.util.concurrent.CopyOnWriteArrayList CopyOnWrite容器只能保证数据的最终一致性,不能保证数据的实时一致性.所以如果你希望写入的的数据,马上能读到 ...

  4. Linux 的字符串截取很有用。有八种方法。

    假设有变量 var=http://www.aaa.com/123.htm 1. # 号截取,删除左边字符,保留右边字符. echo ${var#*//} 其中 var 是变量名,# 号是运算符,*// ...

  5. chrome调试工具高级不完整使用指南（基础篇）

    一.前言 本文记录的是作者在工作上面对chrome的一些使用和情况的分析分享,内容仅代表个人的观点.转发请注明出处(http://www.cnblogs.com/st-leslie/),谢谢合作 二. ...

  6. 【工匠大道】一些Vim(Linux)不常见但很逼格的命令(不断更新中)

    本文地址 分享提纲: 1. :Tlist 2. :colorscheme 3. :set cursorline 4. ma 5. vim -x 6. CTRL-] 7. 折叠 8. 向别的用户终端写信 ...

  7. 分享20款移动开发中很有用的 jQuery 插件

    今天,很显然每个网站都需要有一个移动优化的界面以提高移动用户的使用体验.在开发任何移动项目时,要尽可能保持每一种资源尺寸都尽可能的小,以给最终用户提供一个好的体验是非常重要的.在这篇文章中我们已经编制 ...

  8. 对于 Web 开发很有用的 jQuery 效果制作教程

    如果你的项目中需要响应式滑块,炫丽的图片呈现,对话框提示,轻巧动画等效果,jQuery 是完美的解决方案.凭借这个快速,易用的 JavaScript 库,可以轻松处理语言之间的交互,它给人最快速的 W ...

  9. Chrome调试工具简单介绍

    作为前端开发者都知道,快捷键F12可以打开chrome调试工具.firefox可以打开firebug工具.“工欲善其事,必先利其器”,对调试工具的掌握,能大大提高我们调试代码的效率.因为我平常chro ...

随机推荐

  1. Mysql集群读写分离（Amoeba）

    Amoeba原理戳这里:Amoeba详细介绍 实验环境 Master.Amoeba--IP:192.168.1.5 Slave---IP:192.168.1.10 安装JDK JDK下载地址:http ...

  2. PHP foreach 遍历数组是打印出相同的数据

    https://www.toptal.com/php/10-most-common-mistakes-php-programmers-make PHP makes it relatively easy ...

  3. LPC1768的IIS通讯

    IIS是飞利浦公司定义的一种用于音频传输的数字总线,LPC1768支持该总线, I2S接口为一条3线串行总线,含有1根数据线.1根时钟线和1根字选择信号线.基本的I2S连接具有一个主机(其总是为主机) ...

  4. STM32启动模式及API（转）

    源:STM32启动模式及API 我们玩ARM9,一般都是在内存里调试程序,速度飞快.STM32下也可以这样,虽说现在的flash寿命已经很长了,但flash中调试烧录程序还是一个很慢的过程,有时候程序 ...

  5. iOS开发——单例模式

    一.用if语句实现单例 1.在.h文件中 #import <Foundation/Foundation.h> @interface YYTRequestTool : NSObject +( ...

  6. STM32F103 使用TIM3产生四路PWM

    STM32F103 使用TIM3产生四路PWM 程序如下: /********************************************************************* ...

  7. 前段验证框架 formValidator

    http://blog.csdn.net/lorinzhang/article/details/7283557

  8. [Angular Tutorial] 12 -Event Handlers

    在这一步中,您将会在电话细节页面添加一个可点击的电话图片转换器. ·电话细节页面展示了当前电话的一张大图片和几张相对较小的略图.如果我们能仅仅通过点击略图就能把大图片换成略图就好了.让我们看看用Ang ...

  9. List<KeyValuePair<TKey,TValue>> 与 Dictionary<TKey,TValue> 不同

    两者都可以通过 KeyValuePair<TKey,TValue> 进行遍历,并且两者可以相互转换: List<KeyValuePair<string,string>&g ...

  10. UVa 143 - Orchard Trees

    题目大意:果园里的树排列成矩阵,它们的x和y坐标均是1~99的整数.输入若干三角形,依次统计每一个三角形内部和边界上共有多少棵树. 三角形P0P1P2有向面积为A:2A = x0y1 + x2y0 + ...