前面的话

  对于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. Sublime Text 3 搭建 Golang 开发环境

    安装Golang go语言主页: https://golang.org/ go语言安装下载: https://golang.org/dl 环境变量设置: GOROOT: GOROOT变量设置go安装的 ...

  2. [Big Data]从Hadoop到Spark的架构实践

    摘要:本文则主要介绍TalkingData在大数据平台建设过程中,逐渐引入Spark,并且以Hadoop YARN和Spark为基础来构建移动大数据平台的过程. 当下,Spark已经在国内得到了广泛的 ...

  3. c#之从服务器下载压缩包，并解压

    项目的配置文件为了和服务器保持一致,每次打包时都从网上下载配置文件,由于下载的是zip压缩包,还需要解压,代码如下: using ICSharpCode.SharpZipLib.Zip; using ...

  4. CentOS 6.4 利用 Awstats 7.2 分析 Nginx 日志

    一.配置Nginx 日志分割 (略) 二.配置FCGI 1.安装CPAN wget http://search.cpan.org/CPAN/authors/id/A/AN/ANDK/CPAN-2.00 ...

  5. linux查看系统负载

    摘要:number of cores = max load , linux 系统负载高 如何检查? 1:load Average    1.1:什么是Load?什么是Load Average?    ...

  6. iOS 数字每隔3位添加一个逗号的

    +(NSString *)countNumAndChangeformat:(NSString *)num { ; long long int a = num.longLongValue; ) { co ...

  7. (中等) POJ 2528 Mayor's posters , 离散+线段树。

    Description The citizens of Bytetown, AB, could not stand that the candidates in the mayoral electio ...

  8. 128階數的Shunt音量控制器

    源:128階數的Shunt音量控制器 紅外線遙控 - 256階Shunt音量及控制及音源 選擇器

  9. STM32的时钟树深入详解以及RCC配置

    在STM32上如果不使用外部晶振,OSC_IN和OSC_OUT的接法 如果使用内部RC振荡器而不使用外部晶振,请按照下面方法处理: 1)对于100脚或144脚的产品,OSC_IN应接地,OSC_OUT ...

  10. listview 去掉header和footer中的分割线

    在listView中加上android:headerDividersEnabled="false" android:footerDividersEnabled="fals ...