不常见但很有用的chrome调试工具使用方法
前面的话
对于chrome调试工具,常用的是elements标签、console标签、sources标签和network标签。但实际上,还有一些不太常见但相当实用的方法可以提高网页调试效率。本文将详细介绍那些不常见的chrome调试工具使用方法
控制台
在控制台直接输入代码,按下回车键,代码就会被执行。其返回值也会在控制台中被打印出来
通过上下箭头键,可以随时从相关列表中找回已经执行过的命令,并在控制台中重新执行它们
通常情况下,控制台只提供单行输入,我们可以用分号做分割符来执行多个javascript语句;而如果需要多行代码的话,可以通过组合键shift+enter来实现换行,在这种情况下代码不会被立即执行
刷新
一般地,人们对于刷新的印象只是停留在使用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,可以滚动浏览器到元素所处位置
代码反压缩
一般地,线上的javascript代码都是经过压缩的,基本上无法直接阅读。点击下方的大括号{}图标,浏览器会反压缩过重新排版美化当前的javascript代码
断点调试
【按钮介绍】
第一个按钮(F8):断点间调试
第二个按钮(F10):单步调试
第三个按钮(F11):进入函数
第四个按钮(shift+F11):离开函数
第五个按钮(ctrl+F8):取消全部断点
【文件搜索】
搜索要进行断点调试的文件,使用ctrl+o即可调出搜索框
【添加watch】
要将变量或函数添加到watch中,只需进行如下操作
【删除全部断点】
在右侧断点区域(breakpoints)点击鼠标右键,选择(remove all breakpoints)即可
转载于:https://www.cnblogs.com/xiaohuochai/p/6344886.html
不常见但很有用的chrome调试工具使用方法相关推荐
- css 一些好玩的属性,css一些不常见但很有用的属性操作大全
1.自定义文本选择 ::selection { background: red; color: black; } 2.去掉video的controls中的下载按钮 video::-internal-m ...
- 16条很有用的Chrome浏览器命令
为什么80%的码农都做不了架构师?>>> Google Chrome浏览器有很多的特性在界面菜单中是没有体现的,你可以通过「chrome://命令」来访问.在Chrome的浏览 ...
- css一些不常见但很有用的属性操作
1.自定义文本选择 ::selection {background: red;color: black; } 2.去掉video的controls中的下载按钮 video::-internal-med ...
- Linux 的字符串截取很有用。有八种方法。
假设有变量 var=http://www.aaa.com/123.htm. 1. # 号截取,删除左边字符,保留右边字符. 复制代码 代码如下: echo ${var#*//} 其中 var 是变量名 ...
- chrome调试工具高级不完整使用指南(基础篇)
一.前言 本文记录的是作者在工作上面对chrome的一些使用和情况的分析分享,内容仅代表个人的观点.转发请注明出处(http://www.cnblogs.com/st-leslie/),谢谢合作 二. ...
- 前端~css~Chrome调试工具、元素显示模式、盒模型、flex弹性布局
文章目录 Chrome调试工具 块级元素 行内元素 盒模型 flex布局(弹性布局) 常用属性 Chrome调试工具 在浏览器任何一个网页中,鼠标右键单击,选择检查,可打开调试工具.或者f12键. 打 ...
- 【译】你不知道的 Chrome 调试工具技巧 第十二天:忍者日志打印!(the ninja logs)...
特别声明 本文是作者 Tomek Sułkowski 发布在 medium 上的一个系列.据作者透露一共有 24 篇,一直更新到 12 月 24 日 版权归原作者所有. 作者在Twitter上推荐我们 ...
- Unix / 类 Unix shell 中有哪些很酷很冷门很少用很有用的命令?(转)
著作权归作者所有. 商业转载请联系作者获得授权,非商业转载请注明出处. 作者:孙立伟 链接:http://www.zhihu.com/question/20140085/answer/14107336 ...
- 前端笔记(7)css属性书写顺序,布局流程,chrome调试工具
css样式表/层叠样式表(5) css属性书写顺序 布局流程 chrome调试工具 css属性书写顺序 布局定位属性 display / position / float / clear / visi ...
最新文章
- 厦门大学江保详:缺陷检测的讲解!
- Oracle事务的隔离
- 【LDA学习系列】Beta分布Python代码
- 自定义的 ListBoxItem 自适应ListBox的宽度
- PHP使用feof()函数读文件的方法
- 数据存储之 SQLite 数据库操作(三)
- shell脚本初体验
- 2021泰州高考什么时候查成绩查询,2021年泰州学院高考录取结果什么时候出来及查询系统入口...
- scrapy爬虫系列之三--爬取图片保存到本地
- idea插件导出_Intellij IDEA 中我一直在用的几个插件
- 五阿哥钢铁电商平台Docker容器云平台建设实践——你想知道的都在这里!
- eclipse占用内存过大_Java内存泄漏分析工具Memory Analyzer Tool
- Cocoa教学:Windows OOP与Cocoa MVC之对比
- telnet协商过程--转载自arthurscfd的《telnet协商》
- 麻省理工线性代数第一讲
- 免费pdf转换成jpg图片方法
- 如何修改本地网站的域名
- 刘德华开抖音了,一键下载华仔所有无水印视频
- php 带http的域名,php提取URL中的域名部分
- lammps案例:Fe原子辐照轰击多层石墨烯模拟
热门文章
- UA MATH571B 试验设计III 单因素试验设计2
- 初步学习用超图处理三维场景
- 超图 for javascript 版本入门程序讲解
- JavaScript语句模版
- 一个sqlserver数据库表查看与备份软件
- 基本拖拽效果,使用 mousedown , mousemove , mouseup实现
- 【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目
- 史上最简单的SpringCloud教程 | 第六篇: 分布式配置中心(Spring Cloud Config)(Finchley版本)...
- target和currentTarget
- 英文构词法 —— ant、ent 后缀