[译]15个关于Chrome的开发必备小技巧

  • 时间:
  • 浏览:3
  • 来源:彩神幸运飞艇_神彩幸运飞艇官方

十一、强制改变元素状态

原来牛逼的功能就是多光标。

七、格式化代码

注:该搜索也支持正则表达式。

1、 F12打开Chrome调试器

Chrome通过其内置的优化器,帮助你提高文件内容的可读性。对于压缩过可能性杂乱的代码,尤为适用。

九、设备模拟器

1、F12打开Chrome开发工具;

在颜色预览中,通过Shift + 鼠标点击,就可后要 在rgba,hsl和hexadecimal并全部都是格式中,来回切换。

3、在样式编辑器中,点击颜色预览,就会经常出现这人 颜色选折 器。

操作如下:

2、按下Ctrl+Shift+F(Mac上Cmd+Opt+F);

当你调用了Chrome的颜色选折 器后,我能 通过你的鼠标,悬浮在网页中的任意处,获取颜色,它会十分精准地将其转加在对应的编码格式。

为什么在实现呢?

1、F12打开Chrome调试器;

1、F12打开你的Chrome调试器;

六、保存日志

Chrome的工作空间,也是非常强大的,它可后要 直接编辑和保存你的本地文件,不必额外的操作,例如qq克隆好友 、粘贴。为什么在配置它呢?

但是 ,当让我们当让我们当让我们 歌词 可后要 通过Setting à General,在General面板中选中’Show user agent shadow DOM’这人 选项,来展示哪些被隐藏掉的基础元素。

操作如下:

3、$0--$4—代表你在Chrome调试器中操作不同DOM元素的历史记录,且最多记录5次,故而必须$0-$4这三个小变量。$0代表最近一次,依次类推。

1、F12打开Chrome调试器;

2、在调试器底部选中Emulation选项;

一、快速查找文件

当你在Chrome调试器的sources栏,可能性打开了文件,Chrome也允许你跳到指定的行数,在Windows和Linux系统下,只需按下Ctrl+G(Mac上Cmd+L),但是 输入你指定的行数即可。

五、多光标

但是 ,可能性当让我们当让我们当让我们 歌词 想在整个工程下,查找一段源代码呢?

十二、可视化“隐藏的DOM”

四、在控制台(Console)中获取DOM元素

十、颜色选折 器

在console面板上勾选‘保存日志’选项,则不必在你每次加载页面时,清空日志。当你愿意调查页面关闭前的bugs时,可要记住这人 选项哦。

操作如下:

3、在输入框中输入你想查询的源代码,回车,就OK啦。

原来操作后,不管你打开哪个页面,一定会经常出现刚才你操作的文件。为了更加有用,我能 将页面中用到的文件映射到相应的文件夹,允许在线编辑和简单的保存。

十五、利用Chrome的工作空间,编辑本地文件

十四、 改变颜色格式

你甚至可后要 单独地去设置它们的样式。

1、$()—就是document.querySelector()原生法律法律依据 的映射。功能嘛,就是获取并返回第另三个小与填写的CSS属性匹配的DOM元素,如$(‘div’)就会返回第另三个小经常出现在页面中的div元素。

例如当让我们当让我们当让我们 歌词 可后要 通过Chrome模拟人为触摸屏幕和晃动设备。你甚至可后要 通过它改变你的地理位置哦。

2、选折 你愿意阅读的文件;

当你想在呈现的文件中多处操作代码时,我能 通过按住Ctrl(Mac上Cmd),但是 鼠标点击,你愿意经常出现的光标处即可。

是一定会很炫酷?

1、F12打开你的Chrome调试器;

3、点击文件下方的”{ }”状按钮即可。

操作如下:

操作如下:

另并全部都是,法律法律依据 就是Ctrl+O,输入”:”+行数即可。

Chrome开发工具另三个小强制改变元素CSS状态的功能,如:hover和:focus。对于CSSer比较方便。

Chrome控制台,提供了法律法律依据 和变量来快速获取页面中的DOM元素,如下:

操作如下:

Web浏览器在构建例如textbox,button以及input哪些元素时,通常会隐藏在其之下的展现层元素。

当你选中另三个小匹配项后,利用Ctrl+D(Mac上Cmd+D),就会将下另三个小相同的匹配项也选中,该功能可后要 帮助你同去编辑它们。

2、按下Ctrl+P(Mac上Cmd + P);

原文:15 Must-Know Chrome DevTools Tips and Tricks

可能性你使用过Sublime,没人我能 知道’Go to anything’的强大。没错,Chrome现在一定会了这人 功能。

3、搜索你想打开的文件名即可。

2、选中目标元素;

三、跳到指定行

谷歌Chrome,是当前最流行且被众多web开发人员使用的浏览器。最快六周就更新发布一次以及伴随着它不断强大的开发组件,使得Chrome成为你必备的开发工具。例如,在线编辑CSS,console以及debugger哪些常用的调试技术,或许你可能性了解。在本篇文章中,当让我们当让我们当让我们 歌词 将介绍1三个小炫酷且实用的技巧,这将调慢的提高你的开发速率。

二、在源代码中搜索

2、 找到Sources栏,经常出现在左侧的控制面板,点击鼠标右键,选折 Add Folder To Workspace。可能性,直接将你整个工程文件夹,拖拽到调试器中。

http://www.cnblogs.com/giggle/p/5966991.html

原来十分酷炫的功能就是,模拟移动设备端。

2、$$()—就是document.querySelectorAll()原生法律法律依据 的映射。功能嘛,就是获取并返回另三个小数组,数组中所含了所有与你填写的CSS属性匹配的DOM元素。

3、最后在Emulation面板中,左侧选中Sensors即可。

十三、选中下另三个小匹配项