前面的话

  对于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. jQuery学习笔记—— .html(),.text()和.val()的使用

    本节内容主要介绍的是如何使用jQuery中的.html(),.text()和.val()三种方法,用于读取,修改元素的html结构,元素的文本内容,以及表单元素的value值的方法.jQuery中为我 ...

  2. panel的autoscroll属性不起作用

    已经设置panel的autoscroll属性为true,而且panel内 的控件也达到了应该滚动的地步,但是就是不见滚动条.这是为什么呢? 原因就是richtextbox的anchor属性设置了bot ...

  3. Hibernate查询之API查询

    Hibernate在检索数据上,可以使用SQL.HQL和官方API进行查询,本人主要利用API进行相关查询的小demo. 话不多少直接上demo. demo1:基本查询 /** * 默认不加任何条件的 ...

  4. hibernate--ID生成策略--XML

    xml生成id, a) generator b) 常用4个: native, uuid, identity, sequence 1. 新建java项目,  引入hibernate, junit(use ...

  5. iOS之SDWebImage清理缓存

    .找到 SDWebImage找到SDImageCache类 添加如下方法 - (float)checkTmpSize { float totalSize = 0; NSDirectoryEnumera ...

  6. iOS之NSDictionary和NSArray以及NSMutableDictionary和NSMutableArray：将不再是问题

    字典的key就相当于数组的下标,怎样操作数组你就学会了怎样才做字典:来感受一把 需要注意的是读取文件的类型要集合.plist文件的rooty:否则将不能读入文件 // 1.全国省市:得到的是省和市 / ...

  7. jquery.elevateZoom实现仿淘宝看图片，一张小的，一张大用于鼠标经过时候显示

    实现这个效果你需要准备两张图片,一张小的,一张大用于鼠标经过时候显示.然后我们只要为img标签添加data-zoom-image属性,其值为大图的地址,最后在javascript中选择该图片调用ele ...

  8. leetcode--002 rpn

    package leetcode; import java.util.Stack; public class RPN { public static int evalRPN(String[] toke ...

  9. 【转】图片缓存之内存缓存技术LruCache、软引用 比较

    每当碰到一些大图片的时候,我们如果不对图片进行处理就会报OOM异常,这个问题曾经让我觉得很烦恼,后来终于得到了解决,那么现在就让我和大家一起分享一下吧.这篇博文要讲的图片缓存机制,我接触到的有两钟,一 ...

  10. PLSQL的一些事儿

    每一个软件都是设计精妙的 plsql就可以使用一些简单代码代替长的语句,比如s=SELECT * FROM 数据插入报错: 原因: 一般情况下,数据库的NLS_CHARACTERSET 为AL32UT ...