谷歌浏览器开发常使用8大技巧

  • 时间:2018-07-02 22:47 作者:源码时代 来源:源码时代 阅读:937
  • 扫一扫,手机访问
摘要:作为专业的web开发者,Chrome是用最为广泛的浏览器,当然,所有的起因都归于它强大而不断扩大的开发功可以,造就了它在web开发中的地位。现在的你能熟习了它的部分的功可以。如:常使用的console和debugger,在线编辑css等入门级技巧。今天主要是给大家分享一下chrome常使用小技巧,学

作为专业的web开发者,Chrome是用最为广泛的浏览器,当然,所有的起因都归于它强大而不断扩大的开发功可以,造就了它在web开发中的地位。现在的你能熟习了它的部分的功可以。如:常使用的console和debugger,在线编辑css等入门级技巧。今天主要是给大家分享一下chrome常使用小技巧,学会了的话,会让你的开发更加的方便,同时也能改进你的开发流程,快快来学习吧!

技巧1:快速切换文件

假如你之前用过sublime text ,有时候你还真不习惯没有go to anything这个功可以,当然,强大的chrome开发者工具备这个功可以哦,怎样玩呢?来看一下操作吧。

当开发者工具被打开的时候,按CTRL+P(苹果小朋友cmd+p),就可以快速搜寻和打开你项目的文件了。

如图:

谷歌浏览器开发常使用8大技巧



技巧2:在源代码中搜索

在项目开发中,假如你希望在源代码中搜索要怎样办呢?在页面已经加载的文件中搜寻一个特定的字符串,快捷键是Ctrl + Shift + F (Cmd + Opt + F),这种搜寻方式还支持正则表达式哦

如图:

谷歌浏览器开发常使用8大技巧


技巧3:快速跳转到指定行

  在Sources标签中打开一个文件之后,在Windows和Linux中,按Ctrl + G,(or Cmd + L for Mac),而后输入行号+回车就可,DevTools就会允许你跳转到文件中的任意一行。

另外一种方式是按Ctrl + O,输入:和行数,而不使用去寻觅一个文件。

如图:

谷歌浏览器开发常使用8大技巧

技巧4:在控制台选择元素

  开发者工具控制台支持少量变量和函数来选择DOM元素:

$()–document.querySelector()的简写,返回第一个和css选择器匹配的元素。例如$(‘div')返回这个页面中第一个div元素

$$()–document.querySelectorAll()的简写,返回一个和css选择器匹配的元素数组。

$0-$4–依次返回五个最近你在元素面板选择过的DOM元素的历史记录,$0是最新的记录,以此类推。

谷歌浏览器开发常使用8大技巧



技巧5:用多个插入符进行选择

当编辑一个文件的时候,你能按住Ctrl(cmd for mac),在你要编辑的地方点击鼠标,能设置多个插入符,这样能一次在多个地方编辑。

谷歌浏览器开发常使用8大技巧


技巧6:优质打印

Chrome's Developer Tools有内建的美化代码,能返回一段最小化且格式易读的代码。Pretty Print的按钮在Sources标签的左下角。

如图:

谷歌浏览器开发常使用8大技巧

点击后的效果如下图:

谷歌浏览器开发常使用8大技巧


技巧7:颜色选择器

当在样式编辑中选择了一个颜色属性时,你能点击颜色预览,就会弹出一个颜色选择器。入选择器开启时,假如你停留在页面,鼠标指针会变成一个放大镜,让你去选择像素精度的颜色。

如图:

谷歌浏览器开发常使用8大技巧



技巧8:改变颜色格式

  在颜色预览功可以用快捷键Shift +点击鼠标左键,能在rgba、hsl和hexadecimal来回切换颜色的格式

如图:

谷歌浏览器开发常使用8大技巧

好了,今天给大家带来的几个小技巧,你学会了吗?现在是不是能改变你对浏览器的新认识了,理解更多技术知识,请多关注我们源码时代H5学科技术文摘哦!持续升级中。

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】怎么做才能建设好外贸网站?(2023-12-20 10:05)
【系统环境|软件环境】梦幻仙域游戏攻略(2023-12-19 10:02)
【系统环境|软件环境】梦幻仙域游戏攻略(2023-12-19 10:02)
【系统环境|】卡帕部落揭秘潮玩新宠,探究玩法(2023-12-14 09:45)
【系统环境|数据库】 潮玩宇宙游戏道具收集方法(2023-12-12 16:13)
【系统环境|】如何开发搭建卡帕部落模式源码(2023-12-12 10:44)
【系统环境|】遥遥领先!青否数字人直播系统5.0发布,支持真人接管实时驱动!(2023-10-12 17:31)
【系统环境|服务器应用】克隆自己的数字人形象需要几步?(2023-09-20 17:13)
【系统环境|】Tiktok登录教程(2023-02-13 14:17)
【系统环境|】ZORRO佐罗软件安装教程及一键新机使用方法详细简介(2023-02-10 21:56)
手机二维码手机访问领取大礼包
返回顶部