网站开发必知的谷歌浏览器工具

谷歌浏览器是目前网络开发者使用的最受欢迎的网络浏览器。其自带的开发人员工具(Developer Tools)对网站开发者来说是个很好的工具。很多人都很熟悉它的许多功能如编辑CSS,使用控制台和调试器。在这篇文章中,我们将与大家分享15个很酷的开发技巧,帮助你提高开发效率。

1、快速的文件交换

如果你的项目里有很多文件,你一定少不了它。在 Developer Tools(开发人员工具) 中按 Ctrl + P(Mac 使用 Cmd+ P)即可快速搜索文件,并打开在你的项目中的任何文件。

2、源代码搜索

在网页上指定内容对加载的所有文件进行搜索,按 Ctrl + Shift + F(Mac:Cmd + Opt + F)。支持正则表达式。

3、跳转到指定的行数

当你在源选项卡中打开一个文件,DevTools 让您轻松跳转到任何行。使用方法,在 Windows 和 Linux 中使用 Ctrl + G(Mac:Cmd + L),然后输入跳转的行号。

另一种方法是按 Ctrl + O ,输入“:”后跟一个需要跳转的行号。

4、在控制台选择元素

在DevTools控制台支持一些方便的变量和函数选择DOM元素:

1. $() – document.querySelector() 返回匹配的第一个元素,匹配CSS选择器(如 $(‘div’) 将返回页面中的第一个div元素)

2. $$() – document.querySelectorAll() 。返回匹配匹配的所有元素。

3. $0-$4 – 在元素面板中选择五个近期匹配的DOM元素历史。

5、使用多个插入符与选择

同时编辑一个文件时,你可以通过按住 Ctrl 键(Mac:Cmd)点击多个需要编辑的地方,松开 Ctrl 键后,您就可以同时在多个地方进行编辑了。

6、保留日志

通过检查控制台选项卡中保存日志选项,可以使DevTools控制台坚持在每一个页面加载清除它的日志代替。当你要调查,显示在页面卸载之前的错误,这是得心应手。

7、代码美化(解压缩)

Chrome的开发工具有一个内置的代码美化,可以帮助你恢复压缩后的代码到它力所能及的可读格式。这个美化按钮位于你当前打开的文件的左下角。

8、设备模式

DevTools包括一个强大的方式发展移动友好的页面。通过它的大部分主要功能,从谷歌视频的推移,如屏幕缩放,触摸仿真和网络连接不良模拟器。

9、设备模拟传感器

的设备模式的另一个很酷的功能是模拟移动设备的传感器,如触摸屏和加速度计的选项。你甚至可以改变你的地理位置。该功能位于下元素标签的底部 Emulation – Sensors

10、拾色器

当在样式编辑器中选择一种颜色,你可以点击颜色预览然后选择器会弹出。同时,拾色器被打开,如果你在你的网页悬停,鼠标指针会变成一个放大镜来选择颜色与像素精度。

11、强制元素状态

DevTools有一个特点,可以模拟CSS状态,如:hover、:focus等,因此很容易定义他们的风格。

12、可视化的影子DOM

Web浏览器构建的东西像文本框,按钮和输入出它们通常从视图中隐藏等基本要素。但是,你可以去 Settings- > General 选择  Show user agent shadow DOM,这将显示他们中的元素标签。你甚至可以他们的风格独立,它给你一个很大的控制。

13、选择下一个出现

在编辑源文件中,如果按Ctrl + D(Cmd + D),将会框选出文件中相同的部分,帮助您同时编辑它们。

14、改变颜色格式

按住 Shift 单击需要转变的颜色即可在 RGBA、HSL和十六进制格式间却换。

15.编辑本地文件,通过工作区

工作区是一个强大的Chrome DevTools功能,把它变成一个真正的IDE。工作区相匹配的源选项卡中的文件到您的本地项目文件,所以现在你可以编辑和直接保存,无需复制、粘贴更改到外部文本编辑器。

要配置工作区,转到来源选项卡,并单击鼠标右键,在左侧面板(其中源)的任何地方,然后选择 Add Folder To Worskpace或只需拖放整个项目文件夹到开发工具。现在,所选择的文件夹,其子目录,并在其中的所有文件将可用于编辑不管你是在哪一页。为了使它更加有用,你就可以在你的文件夹映射文件所使用的页面,允许实时编辑和保存方便。

原文地址:查看原文

欢迎转载,转载请注明本文链接:众推不靠谱 » 网站开发必知的谷歌浏览器工具

吐槽 2


  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. boke112导航没想到谷歌浏览器还有这么好用的工具啊,先收藏了回复