chorme dev tools的小技巧
1 快速文件转换
在DevTools打开的时候,你可以按下Ctrl+P来快速的寻找和打开你工程中的任意文件。
2 在源代码中搜索
Ctrl+Shift+F 即可在所有已加载的文件中查找一个特定的字符串,这个搜索的方法也支持正则表达式
3 跳转到特定的行数
当你打开一个在源标签里的文件之后,DevTools能够允许你轻松地跳转到代码里的任意一行,Windows和Linus用户只需要按下Ctrl+G,然后输入你想查阅的行数即可;
另一个跳转的方法是按下Ctrl + O
,输入:
和行数,而不用去寻找一个文件;
4 在控制台选择元素
DevTools控制台支持一些变量和函数来选择DOM元素:
$()----document.querySelector()的缩写,返回第一个与之匹配的css选择器的元素,(例如:$('div')它将返回本页的第一个div元素)。
$$()---document.querySlectorAll()的缩写,返回一个数组,里面是与之匹配的css选择器的元素。
$0-$4---依次返回五个最近你的元素面板选择过的DOM元素的历史记录,$0是最新的记录,依次类推;
5 使用多个光标和选择
在sublime Text中,当你编辑一个文件的时候你可以通过按住Ctrl同时点击你想让光标停留的位置,设置多个光标,这样你就可以同时在多个位置输入同一个文本了。
6 保存记录
勾选早console标签下的保存记录(Preserve log)选项,你可以使DevTools的console继续保存记录而不会在每个页面加载之后清除记录,当你想要研究在页面还没加载完之前出现的bug时,这会是一个很方便的方法
7 漂亮的打印{}
Chrome的开发者工具有一段嵌入的美化代码,它可以帮你返回一段最小化的且格式化易读的代码。这个漂亮的印刷按钮在你正确打开文件之后的Sourses标签下的左下角({})。
设备模式
DevTools包括了一个强大的模式可用来开发友好的移动端界面。这个来自谷歌的视频介绍
8 设备模式
DevTools包括了一个强大的模式可用来开发友好的移动端界面。这个来自谷歌的视频介绍了它最主要的功能,有调整大小,触摸仿真和模拟糟糕的网络连接。
9 设备仿真传感器
设备模式的另一个很酷的功能是模拟移动设备的传感器,例如触摸屏幕和加速计。你甚至可以恶搞你的地理位置。这个功能位于元素标签的底部,点击“show drawer”按钮,就可看见Emulation标签 --> Sensors
.
10 颜色选择器
当我们在样式编辑器中选择一种颜色时,你可以点击颜色预览,颜色选择器就会弹出。当颜色选择器开启时,如果你停留在某一页面,你的鼠标指针就会转换成一个放大镜,选择像素精度的颜色。
11 元素状态
DevTools有一个功能是模拟CSS的状态,如在元素中的hover
和focus
,这能够能容易的设计他们的样式。该功能来自css编辑器。
12 可视化Shadow DOM
由于其他基础的元素在视图中正常的隐藏,网页浏览器构建例如文本框,按钮和输入之类的东西。不过,你可以在Settings -> General
中切换成Show user agent shadow DOM
,这样就会在元素标签页中显示被隐藏的代码。给了你很大的控制,让你甚至可以单独地设计他们
13 选择下一个匹配项
当你在Sources 标签下编辑文件时,如果你按下Ctrl + D
(Cmd + D
),下一个匹配项也会被选中,这能够帮助你同时编辑他们。
14 改变颜色格式
在颜色预览中使用Shift + Click
,可以在rgba
, hsl
和 hexadecimal
这三种格式中改变。
15 通过workspaces来编辑本地文件
Workspaces是一个强大的Chrome DevTools的功能,这使它成为一个真正的IDE。Workspaces使Sources标签下的文件和你本地的工程文件相匹配。所以现在你可以直接编辑和保存,而不用复制粘贴到外部的文本编辑器里。 配置Workspaces,你只需要去Sources标签下,在左边的控制面板的任何地方点击右键(sources标签下),并且选择Add Folder To Worskpace, 或者只是把你的整个工程文件夹拖放入Developer Tool。现在,无论你打开哪一页,被选择的文件夹的子目录和它包含的所有文件都将能被编辑。 为了使它更加的有用,你可以将页面中用到的文件映射到相应的文件夹,允许在线编辑和简单的保存
英文出处:http://tutorialzine.com/2015/03/15-must-know-chrome-devtools-tips-tricks/。
chorme dev tools的小技巧的更多相关文章
- 15个你不得不知道的Chrome dev tools的小技巧
转载自:https://www.imooc.com/article/2559 谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览器.伴随每六个星期一次的发布周期和不断扩大的强大的开发功能,Chro ...
- Chorme dev tools小技巧
1.快速稳健转换:打开DevTools,按下Ctrl+P来快速寻找和打开你工程中的任意文件. 2.在源代码中搜索:打开DevTools,按下Ctrl+Shift+F,即可在所有已加载文件中查找一个特定 ...
- Chrome 35个开发者工具的小技巧
来源:w3cplus - 南北(@ping4god) 网址:http://www.w3cplus.com/tools/dev-tips.html 谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览 ...
- [Tools] Eclipse使用小技巧-持续更新
[背景] 使用之中发现一些eclipse使用的小技巧,记录下来供以后查阅 Eclipse保存preferences,并导入到其他workspaces The Export wizard can b ...
- 谷歌浏览器 DEV Tools
谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览器.伴随每六个星期一次的发布周期和不断扩大的强大的开发功能,Chrome变成了一个必须的工具.大多数可能熟悉关于chorme的许多特点,例如使用c ...
- chrome dev tools
chrome dev tools介绍一下Chrome dev tools 的基本使用和一些意想不到的小技巧.\\Chrome Developer Tools 是Chrome内嵌的一系列编辑和调试的工具 ...
- Git小技巧 - 指令别名及使用Beyond Compare作为差异比较工具
前言 本文主要写给使用命令行来操作Git的用户,用于提高Git使用的效率.至于使用命令还是GUI(Tortoise Git或VS的Git插件)就不在此讨论了,大家根据自己的的喜好选择就好.我个人是比较 ...
- linux系统维护时的一些小技巧,包括系统挂载新磁盘的方法!可收藏!
这里发布一些平时所用到的小技巧,不多,不过会持续更新.... 1.需要将history创建硬链接ln 全盘需要备份硬链接 ln /etc/xxx /home/xxx 2.root用户不可以远程 /et ...
- Linux的95个小技巧
Linux的95个小技巧 by WEB全栈工程师 on 2012 年 03 月 27 日 这里总结了Linux使用中的一些小技巧 1.实现RedHat非正常关机的自动磁盘修复 先登录到服务器,然后在/ ...
随机推荐
- 第2章 CentOS网络配置
一.配置说明 1.1 说明 1.本文以VM仅本机模式下与宿主机的网络配置为例. 1.2 达成目标 1.Windows能ping通centOS 2 centOS能够ping通Windows 3 cent ...
- MySQL 索引及其用法
一.索引的作用 一般的应用系统,读写比例在10:1左右,而且插入操作和一般的更新操作很少出现性能问题,遇到最多的,也是最容易出问题的,还是一些复杂的查询操作,所以查询语句的优化显然是重中之重. 在数据 ...
- (type interface {}) to type string
go 语言开发中,经常会在函数中碰到使用 insterface{} 作为接收任意参数,但是我们接收的数据经常是需要做类型转换,由于是初学者,因此,初次转换我是直接就 func New(paramete ...
- maven删除不必要的依赖;优化pom依赖研究
mvn dependency:copy-dependencies -DoutputDirectory=/home/admin/git/oceanus/test 会把所有依赖的插件版本都拷贝进去,而不是 ...
- CentOS 6.x安装多GCC版本号,cmake的安装与使用
操作系统:CentOS release 6.5 (Final) 当前gcc版本号:build=x86_64-redhat-linux Thread ...
- ubuntu uninstall postgres
Steps that worked for me on Ubuntu 8.04.2 to remove postgres 8.3 List All Postgres related packages ...
- 转: memcached Java客户端spymemcached的一致性Hash算法
转自:http://colobu.com/2015/04/13/consistent-hash-algorithm-in-java-memcached-client/ memcached Java客户 ...
- SolidEdge 工程图中如何绘制中断视图
右击长条形的视图,点击新增断裂线,然后绘制两个断点 点击完成之后效果如下图所示 如果要修改断裂视图的样式,则选中这个视图,在左键单击,然后点击这个按钮取消显示断裂视图 然后左键单击断裂视图 ...
- [BLE]CC2640之ADC功能实现和供电电压的採集
一.开篇 Write programs that do one thing and do it well ~~~~~ 发现非常多人关于使用CC2640/CC2650的过程中比較难以应对的问题就是实现A ...
- react 使用 moment 进行 日期格式化
在react中使用得先导入: import moment from 'moment'; 调用: npm install moment var moment = require('moment'); m ...