前端工程师大部分工作成果需要在浏览器中查看，使用 chrome 浏览器的频率非常高。更好更有效率地使用 chrome，将 chrome 配置成趁手的浏览器，将极大提升编程效率。现将chrome浏览器的一些技能分享给大家

​技巧篇

控制台

在 chrome 开发者工具中的任何一个面板下(除 console 面板外)，按住 esc 都可以在该面板下方新生成一个 console 面板

通常情况下，控制台只提供单行输入，可以用分号做分割符来执行多个 javascript 语句；而如果需要多行代码的话，可以通过组合键 shift+enter 来实现换行，在这种情况下代码不会被立即执行。

代码片段

chrome 在 sources 页面提供 snippets 一栏，这里我们可以随时编写 Javascript 代码，运行结果会打印到控制台。代码是全局保存的，在任何页面，包括新建标签页，都可以查看或运行这些代码。使用 command + enter 可以运行该代码

跳转位置

  在 elements 标签下，选择元素节点，点击右键菜单中的 scroll into view，可以滚动浏览器到元素所处位置。

展开 DOM

在 Elements 标签页中，如果要查看一个元素中曾经很深的子元素，可以按住 option 键，点击元素，则元素的 DOM 结构会完全展开

工具篇

Infinity新标签页

　　Infinity是一款标签页美化的插件，使用它不在使你的浏览器那么的单调，还可以添加书签在标签页下面，方便打开，是一个很不错的值得推荐的插件。用了不用在自己的书签收藏夹慢慢的找书签了，可以打开浏览器的第一时间打开自己需要的网站。

Responsive Web Design Tester

The Responsive Web Design Tester 是一个非常棒的浏览器扩展，使你可以快速的查看你的网站在不同设备和不同浏览器下的状态。

Window Resizer

Window Resizer 扩展允许您调整浏览器窗口。单击菜单栏中的图标会产生一个可以自定义窗口大小的下拉菜单。

olorPick Eyedropper

ColorPick Eyedropper 是一个简单的颜色选择器工具,允许你从任何web页面选择颜色值。

CSSViewer

CSSViewer是一个简单的CSS属性查看器。它提供了一个浮动面板，该面板显示鼠标悬浮在的元素的标识，以及它的字体、文本、颜色、背景、框、定位和效果属性。CSSViewer提供你所需要的基本的CSS信息。

最后：最重要的问题，如何最简易地用上谷歌搜索

1.下载hosts文件(需要的私聊回复：下载hosts)

2，然后把hosts(没有后缀的文件)分别调换掉原本系统里的hosts文件，即可正常使用谷歌搜索。

  • Windows 系统hosts位于 C:WindowsSystem32driversetchosts
  • Android(安卓)系统hosts位于 /system/etc/hosts
  • Mac(苹果电脑)系统hosts跟Linux一样位于 /etc/hosts
  • iPhone(iOS)系统hosts跟Linux Mac一样位于 /etc/hosts
  • Linux系统hosts位于 /etc/hosts

chrome控制台如何把vw显示成px_chrome用不好，BUG改到老，这些chrome 浏览器使用技巧你需要掌握...相关推荐

  1. chrome控制台如何把vw显示成px_Chrome 开发者工具的11 个高级使用技巧

    作者 | bitfish  译者 | 王坤祥 策划 | 蔡芳芳 来源 | 前端之巅 本文作者从开发者角度出发,介绍了几个关于 Chrome 开发者工具的高级用法.熟练使用这些高级用法可以大大地提高你的 ...

  2. chrome控制台如何把vw显示成px_罗技lua怎么做到在脚本控制台显示中文的？ - 『悬赏问答区』 - 吾爱破解 - LCG...

    本帖最后由 浅望 于 2020-10-24 22:57 编辑 之前看了@Ganlv 大佬的一系列lua解密教程,然后最近在悬赏求助区看到了一个帖子悬赏求助帖 下载这个帖子里的宏文件,运行发现加了时间锁 ...

  3. chrome控制台如何把vw显示成px_【CSS】rem，em，px的区别和使用场景

    前端潮咖 点击上面蓝字,关注我们! 关注 关注前端潮咖,每日精选好文 作者:大前端小菜鸟 来源:cnblogs.com/hyns/p/12380944.html 作rem布局原理深度理解(以及em/v ...

  4. chrome控制台如何把vw显示成px_你可能不知道的chrome调试技巧

    本文是对常用的chrome调试技巧进行总结整理,如果你没有深入了解过chrome调试工具,此处总有你不知道的惊喜! 从 Chrome 说起 对于大部分人来说,Chrome 可能只是个浏览器,但是对于开 ...

  5. chrome控制台如何把vw显示成px_【CSS】679 rem，em，px的区别和使用场景

    作者:大前端小菜鸟来源: cnblogs.com/hyns/p/12380944.html 作rem布局原理深度理解(以及em/vw/vh) 一.前言 我们h5项目终端适配采用的是淘宝那套<Fl ...

  6. 解决 Chrome/Firefox 中 Sans-serif 字体显示的问题

    解决 Chrome/Firefox 中 Sans-serif 字体显示的问题 参考文章: (1)解决 Chrome/Firefox 中 Sans-serif 字体显示的问题 (2)https://ww ...

  7. 使用Chrome控制台进行3D模型编辑的尝试

    前言:3D模型编辑的核心是对顶点位置和纹理颜色的编辑,这个研究的目的在于寻找一种通过编程方式直接对模型进行编辑的方法,这种编辑方法和时下流行的通过鼠标点选.拖拽进行编辑的方法之间的关系,和前端编程中& ...

  8. Myeclipse和 eclipse中的控制台汉字横着显示修改

    Myeclipse和 eclipse中的控制台汉字横着显示问题的修改 如图: 同一种字体有两种显示方式,比如微软雅黑和@微软雅黑,前一种汉字是竖着显示,后一种汉字是横着显示. 修改方法: prefer ...

  9. 用CSS把文字显示成哆啦A梦

    先看一下最终效果 左面是最终效果,右面是原图 先说说要实现这个效果使用的方法:background-clip 一.background-clip介绍 background-clip:按照MDN上说的, ...

最新文章

  1. 这可能是最简单易懂的机器学习入门
  2. Sentinel 1.5.0 正式发布，引入 Reactive 支持
  3. linux c 字符串查找函数 strstr strcasestr
  4. maven 遇到failOnMissingWebXml有关问题解决方法
  5. 计算机一级怎么描述,计算机一级「关于RGB正确的描述的是」相关单选题
  6. BZOJ1014: [JSOI2008]火星人prefix
  7. 穷人靠力，富人借力！看完你将明白一切！
  8. linux的exec函数
  9. java 当前时间格式_JAVA中获取当前系统时间及格式转换
  10. 为什么有些人退休后，一下子衰老了很多？
  11. Python将csv格式转换为xlsx
  12. python爬取妹子图片1_利用爬虫爬取清纯妹子图片
  13. 【VBox】解决复制VBox虚拟机后提示硬盘UUID 已经存在的问题
  14. FPGA基本开发设计流程
  15. 作为Fab-Liter战略的一部份，安森美剥离晶圆制造厂
  16. 学了很多理论，你为什么还是做不好一名数据分析师?
  17. Eclipse JDT-简介
  18. 田野调查手记·浮山篇（五）
  19. 商务洽谈（谈判）步骤及技巧
  20. linux midi端口,在Linux下玩转MIDI

热门文章

  1. linux修改系统时间为北京时间(CentOS)
  2. XPath 详解,总结
  3. 微信公众号开发之网页授权认证获取用户的详细信息，实现自动登陆
  4. 疑惑即新知——记一次reverse模板实现过程
  5. 【翻译】Programming Ruby——数组，哈希表和控制结构
  6. WSL based ubuntu和docker的文件迁移
  7. 对话框中加入标签页的5种方法
  8. Django 07模型层—单表操作(增删改查)
  9. breeze源码阅读心得
  10. mysql恢复root密码