you have been blockeddiigo 插件|谷歌浏览器diigo书签插件下载 v3.3.1官方版_ - pc6下载站15个必须掌握的谷歌浏览器开发工具使用技巧 - 为程序员服务
15个必须掌握的谷歌浏览器开发工具使用技巧
原文链接：
基本和html和css还有js打交道的人，要不就是用到谷歌的chrome，要不就是火狐的firefox，个人也比较喜欢使用谷歌下的开发工具，这篇文章就是讲到了谷歌开发工具的一些实用但又不是都知道的一些技巧。
下面的文章说明我会用我的理解方式来说明，可能和原文会有略微出入，想知道更准确的说明，请查看原文链接。
1.快速切换文件
谷歌开发工具快速切换文件
使用方法：打开开发工具后，使用Ctrl+P快捷键进行快速查找进行文件切换。
2.快速查找字符
谷歌开发工具快速查找字符
使用方法：打开谷歌开发工具后，使用Ctrl + Shift + F 快捷键，输入所要查找的字符，按回车即可，支持正则表达式。博主尝试后发现，这样一来，再也不用查看源代码查找字符了。
3.文件跳转到某行
谷歌开发工具快速跳转到某行
使用方法：打开谷歌开发工具后，切换到Source栏，使用快捷键Ctrl+G,先输入:后跟上对应的行数即可。
4.在终端选择元素
谷歌开发工具在终端选择元素
使用方法：打开谷歌开发工具的终端界面（Console），输入一下快捷键获得对应的元素：
$()为document.querySelector()的快捷键，获得对应的第一个元素，例如$(‘div’)输出页面上的第一个div元素
$$()对应document.querySelectorAll()返回一个包含特定元素的一个数组。
$0 – $4对应最近所查找的元素的历史记录，其中$0为最新的一个元素
5.同时选中多个位置
谷歌开发工具同时旋转多个快捷键
使用方法：在编辑文档的时候同时按住Ctrl即可选择多个位置。
6.保留js记录
谷歌开发工具保留js输入记录
使用方法：在终端输入界面(console)勾选Preserve Log即可。
7.还原代码缩进
谷歌开发工具还原代码缩进
使用方法：在文件查看界面的下面，点击左下角的{}即可获得漂亮的代码缩进。
8.设备功能
使用方法：这个在原文是一个视频介绍，这里就不介绍了，主要是针对移动设备的开发技术。
9.仍然是移动设备的功能
10.颜色拾取工具
谷歌开发工具颜色拾取
使用方法：在查看样式栏目下，找到有颜色的方框，点击即可使用。
11.查看html元素特定css样式
谷歌开发工具强制显示css样式
使用方法：在样式界面，单击右上角的箭头按钮，即可以选择该元素在不同状态(:hover,:active,:focus,:visited)下的样式。
12.显示元素对应浏览器的样式
谷歌开发工具开启自带样式
使用方法：在开发工具的设置栏目里面，勾选show user agent shadow DOM即可，这里表达的可能不太准确了。
13.同时选中当前页面的多个元素
谷歌开发工具同时选择该页面的多个相同元素
使用方法：在代码编辑页面，使用快捷键Ctrl+D即可，这个方法也是比较常用的。
14.改变颜色的显示方式
谷歌开发工具改变颜色的显示方式
使用方法：在颜色的对应的方框下点击的同时按住Shift键，共可以切换成hsl，rgb和普通的16进制三种模式。
15.通过工作台编辑本地文件
这里说的是把谷歌开发工具当成一个ide工具来实现了，这一点应该用的不多，如果要了解详情的话，可以查看Chrome的官方说明文档。
展示优质WordPress企业主题
原文地址：, 感谢原作者分享。
您可能感兴趣的代码系统大全:最全的软件下载基地！
360手机助手
当前位置：& >
谷歌浏览器那些你可能不知道的隐藏功能
谷歌 Chrome 浏览器一直以速度、简洁和安全为用户所熟知。除此之外，Chrome 的其他功能也非常强大，为了进一步提高工作效率，让我们一一揭晓它的那些隐藏技能吧。
小编推荐《》
同时登入多个账户
用户拥有多个谷歌账户（工作用或个人用）是很习以为常的事情，但是比较麻烦的是常常需要登出一个账号再登入另外一个。但是使用 Chrome 浏览器的话，就无需担心多账号同时登陆的问题。当使用 Gmail 邮箱和谷歌硬盘等其他谷歌服务时，用户能在多个账户之间快速切换。
离线安装扩展程序程序
如今有好一些应用程序不需要网络链接就能够离线使用，比如 Gmail 邮箱、谷歌硬盘和谷歌日历。这对那些不能使用网络或经常出差工作的用户来说是理想办公工具。用户可以从 Chrome 应用商店安装离线扩展程序，并使用 Chrome 应用启动器或 Chrome 浏览器来打开这些程序。
Chrome 进程管理
同时按住 SHIFT+ESC 键能调出 Chrome 任务管理器并显示 Chrome 的进程列表，包括打开的标签页、插件和扩展程序。此外还会显示进程 ID、内存、CPU 和网络等使用情况。通过右击鼠标还能显示其他参数，同时也能让用户结束那些使浏览器运行速度变慢的进程。
使用 Chrome 浏览器当记事本
通过使用 HTML5 的「contenteditable」属性，就能将浏览器的标签页转变成记事本。这个功能很简单，只需要将如下代码复制到地址栏点击回车键，就会出现一个简洁的不能再简洁的空白页面，再点击这个空白页面，就可以开始在页面上输入内容。如果你保存这个页面，你就会得到一个 HTML 文件，当你打开这个文件时，你就能看见你之前输入的内容了。
此外更加高级的编辑功能则需要如下代码：
如果用户不喜欢在键盘上打字，不妨试一试语音搜索这个功能。只需打开谷歌搜索框，轻轻一点搜索框末端的麦克风标志即可打开语音搜索功能。支持多种语言，用户只需通过浏览器设置来激活「OK，Google!」语音控制功能，用户只要一句「OK，Google!」Chrome 浏览器就会执行指令。面前用户可以通过语音控制让浏览器搜索任何想查看的东西，包括天气，方向等。对于某些搜索，Chrome 浏览器的会通过语音搜索朗读搜索结果并提供相关文本。
如果用户在不同地方使用多台电脑，或者帮助亲朋好友解决电脑方面的问题，那么谷歌 Chrome 浏览器的远程桌面工具就能派上用场。它能让用户连接和控制在不同地点的电脑。
用户可以通过 Chrome 浏览器安装远程桌面控制扩展应用，这个插件必须装在每台的 Chrome 浏览器上，点击「分享」按钮则会生成一个密码与对方来共享桌面。在 Chrome 中打开一个新标签页，点击该工具图标，打开应用程序。点击分享这台电脑（Share this computer），接下来你可以选择分享你的 email 地址、你分享的电脑，以及聊天记录。每个远程分享进程都会获得一个唯一的授权码。把这个授权码发给你的好友，对方输入该授权码后便可以访问你分享的内容。
从地址栏搜索特定站点
用户可以通过地址栏搜索 Gmail 邮箱的邮件，或者是 Google Drive 的某个文件、亚马逊或京东的某个商品。用户必须先打开浏览器的设置，在搜索项进入管理搜索引擎。然后你就会发现一系列不同站点的搜索引擎，你可以编辑当前的搜索引擎或设置其他默认搜索引擎。例如淘宝已近存在列表里，通过将其设置成默认搜索引擎后，就可以直接在地址栏里输入关键词就能搜索到你想要的商品。
在注册页面自动生成新密码
Chrome 浏览器能够自动帮助用户在新账户注册页面生成新密码。你只需要在地址栏输入「about:flags」点击确认就能进入该功能的页面，选择「启用密码生成功能」然后重新启动浏览器即可。
完成操作后，Chrome 浏览器就能识别任何用户想要注册新账户的页面，用户可以像平常那样填写注册表单，当用户点击「选择密码」的选项框时，就会出现通知气泡和一个推荐的密码，用户可以选择使用这个推荐的密码或使用自己的密码。下次再登录这个网站的时候，Chrome 会自动调用最初生成的密码，当然所有生成的密码会与 Chrome 浏览器同步。不过该功能还在试验性阶段。
模拟移动设备访问当前网页
Chrome 浏览器除了为普通用户提供强大的 Chrome 扩展外，还提供了强大了 chrome 开发者工具，以帮助广大网站开发者提供诸如兼容性等的测试工作。按下 F12 或（Ctrl+Shift+I）键打开「开发者工具」，点击 [Show drawer] 图标，选择 [Emulation] 后使用者能在 Device 一栏的下拉列表中看到主流的移动设备。
固定标签页
如果有些网页用户需要一直打开，用户可以点击鼠标右键固定该标签页。而标签页的尺寸将变小并自动移到浏览器的最左端，关闭标签页的选项会被移除，在浏览器重新启动的时候会自动打开。用户也可以选择右击鼠标右键取消固定标签页。
本文来自于【】
修改版游戏
修改版游戏
修改版游戏
修改版游戏
修改版游戏
文章排行文章推荐
Copyright&.All Rights Reserved谷歌浏览器怎么调试js？谷歌浏览器调试javascript教程图文详解
作者：佚名
字体：[ ] 来源：互联网 时间：01-12 17:17:21
谷歌浏览器怎么调试js？接下来小编就为大家带来谷歌浏览器调试javascript教程图文详解，感兴趣的朋友可以看一下
&谷歌浏览器是一款由谷歌公司开发的浏览器。谷歌浏览器是一款基于其他开源软件所撰写的。下面小编为大家分享一篇谷歌浏览器调试javascript的教程，希望帮助大家
首先我们打开开发者工具，你可以直接在页面上点击右键，然后选择审查元素或者在Chrome的工具中找到或者你直接记住这个快捷方式： Ctrl+Shift+I (或者Ctrl+Shift+J直接打开控制台)，或者直接按F12。
打开的开发者工具就长下面的样子，建议大家将开发者工具弹出作为一个独立的窗口：
1、Elements标签页
这个就是查看、编辑页面上的元素，包括HTML和CSS：
左侧就是对页面HTML结构的查看与编辑，你可以直接在某个元素上双击修改元素的属性，或者你点右键选;Edit as H直接对元素的HTML进行编辑，或者删除某个元素，所有的修改都会即时在页面上得到呈现。（注：看到上面右键菜单的最后一个选项;审查元素了么？这是不是说明这个开发者工具的页面也是HTML来的呢？你点一下就知道了哦，嘿嘿）
你还可以对某个元素进行监听，在JS对元素的属性或者HTML进行修改的时候，直接触发断点，跳转到对改元素进行修改的JS代码处：
Elements标签页的右侧可以对元素的CSS进行查看与编辑修改：
你还可以通过这里看到各CSS选择器设置的CSS值的覆盖情况。
下面的Metrics可以看到元素占的空间情况（宽、高、Padding、Margin）
注意到上面的Properties没有？这个很有用哦，可以让你看到元素具有的方法与属性，比查API手册要方便得多哦（要注意某些方法和属性在IE、FireFox等其他浏览器下面的支持情况哦）。
2、Resources标签页
Resources标签页可以查看到请求的资源情况，包括CSS、JS、图片等的内容，同时还可以查看到存储相关的如Cookies、HTML5的Database和LocalStore等，你可以对存储的内容编辑和删除。
这里的CSS文件有一个好玩的特性，你可以直接修改CSS文件，并且修改即时生效哦：
3、Network标签页
Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用，特别是在查看Ajax类请求的时候，非常有帮助。注意是在你打开Chrome开发者工具后发起的请求，才会在这里显示的哦。
点击左侧某一个具体去请求URL，可以看到该请求的详细HTTP请求情况：
我们可以在这里看到HTTP请求头、HTTP响应头、HTTP返回的内容等信息，对于开发、调试，都是很有用的。
4、Scripts标签页
很明显，这个标签页就是查看JS文件、调试JS代码的，直接看下图的说明：
还有你可以打开Javascript控制台，做一些其他的查看或者修改：
你甚至还可以为某一XHR请求或者某一事件设置断点：
5、Timeline标签页
注意这个Timeline的标签页不是指网络请求的时间响应情况哦（这个在Network标签页里查看），这个Timeline指的JS执行时间、页面元素渲染时间：
点击底部的Record就可以开始录制页面上执行的内容。
6、Profiles标签页
这个主要是做性能优化的，包括查看CPU执行时间与内存占用：
7、Audits标签页
这个对于优化前端页面、加速网页加载速度很有用哦（相当与Yslow）：
点击run按钮，就可以开始分析页面，分析完了就可以看到分析结果了
它甚至可以分析出页面上样式表中有哪些CSS是没有被使用的哦：
8、Console标签页
就是Javascript控制台了：
这个除了查看错误信息、打印调试信息（console.log()）、写一些测试脚本以外，还可以当作Javascript API查看用。
例如我想查看console都有哪些方法和属性，我可以直接在Console中输入;并执行：
怎么样，一目了然了吧 ？再例如我想查看日期函数都有哪些方法：
（注：注意在这里看到的某些方法和属性是ES5新增的，记得兼容其他浏览器的支持情况哦）
Google Chrome除了简洁、快速，现在的Chrome的插件也非常的丰富了。而对于web开发者来说，Chrome对于HTML5、CSS3等一些新标准的支持也是比较完善的，而且Chrome的开发者工具我个人认为真的非常好用，这就是为什么我向web开发者推荐使用Chrome的原因。
大家感兴趣的内容
12345678910
最近更新的内容