今天给各位分享谷歌浏览器 调试 跳转的知识，其中也会对谷歌浏览器 调试 跳转怎么设置进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录

1. 为什么谷歌浏览器开发者工具显示的鼠标是圆点
2. 如何在移动设备上调试html5开发的网页
3. 如何在Chrome浏览器安装第三方扩展
4. 谷歌浏览器调试js的步骤 谷歌浏览器怎样调试javascript

一、为什么谷歌浏览器开发者工具显示的鼠标是圆点

GoogleChrome开发者工具只要安装了谷歌浏览器，就可以使用GoogleChrome开发者工具了，GoogleChrome开发者工具是内嵌到浏览器的开发工具,打开方式有两种：第一“按F12”，第二：shift+ctrl+iConsole介绍Console可以查看网页运行后提示的消息，错误或者警告以及输出内容等，网页后台可以使用Console.debug("输出内容")；来在Console输出显示，可以做到调试的作用吧，不过一般真正调试不是拿Console。console.debug("Console使用介绍");console是小写形式，不然提示没有ConsoleResources介绍Resources里可以查看web程序跑起来后所加载的一些资源（Resources），包括图片或者其他“值”，以及CookiesSources介绍Sources可以查看运行的脚本，调试一般都是在Sources调试的，所以程序开发者需要了解和熟悉Sources的使用Sources调试使用在左侧的脚本代码编号，鼠标点击即可添加断点，添加断点后，刷新网页，程序运行到断点即可看到断点调式的状态了，具体调试需要在自己想查看某个方法里边是否有问题，一步步排除，效果很好NetWork介绍NetWork可以看到网页加载的脚本和资源的时间，还可以看到某些不能加载成功的资源；这里有位是百度首页演示，百度首页内容很干净所以不需要加载什么图片等资源Elements介绍Elements这个就比如页面的每个元素吧，比如百度搜索这个图片，可以通过Elements找到，搜索框也可以，在底下的“放大镜”类似的控件，点击然后选择自己想要查看要素或位置，Elements会跳转到相应的实现代码

二、如何在移动设备上调试html5开发的网页

通过【设置】>【Safari】>【高级】>【Web检查器】打开。见下图（点击查看大图），并且你会看到该选项下面对电脑操作的相应描述，照做就好。

2.1先在手机Safari中打开你想调试的网页，并用数据线连接到电脑（我这里是Mac）

2.2再在电脑上打开Safari点击【Develop】菜单，就会看到如下图所示（点击查看大图）：

3.3点击2.2中的网站名就会在电脑上打开Safari的控制台，如下图（点击查看大图）：

如上3.3图所示，此时你可以查看手机网页的DOM结构，并且和电脑端网页调试无异，当鼠标滑过这些DOM节点的时候手机上的相应布局也会高亮起来，如下图（点击查看大图）：

1.1【设置】>【关于手机】>【版本号（Build number）】，对版本号这一项连点7下（这是官方文档里的说法）就会提示“你已成为开发者”。

1.2再返回【设置】>【开发者选项】>【USB调试】打开手机USB调试。

这块比较麻烦，因为要装一下Android的SDK。

2.1下载Android SDK，并解压，我把整个adt目录放在了/Users/David/adt/这里。

2.2设置环境变量。打开终端在David路径下（形如 DaviddeMacBook-Pro:~ David$）输入 open.bash_profile，如果文件存在则会打开，如果不存在则再输入touch.bash_profile创建并打开这个文件。在文件里输入export PATH=$PATH:/Users/David/adt/sdk/platform-tools:/Users/David/adt/sdk/tools，关闭保存。最后在终端里输入 source.bash_profile来更新环境变量使其生效。终端里输入 adb出现命令帮助信息就是成功了。

2.3在终端里输入 adb forward tcp:9222 localabstract:chrome_devtools_remote。

3.1在手机上的Chrome里打开想要调试的网页，用数据线连接手机和电脑（我的是Mac。唉～我只是强调平台的不同，不要误会）。

3.2打开电脑上的Chrome，在地址栏里输入 about:inspect选中【Discover USB Devices】前面的复选框。出现下图画面（点击查看大图）：

4.1你可以点击图3.2中检测到的设备上正在运行的网站下面那个【inspect】，或者在浏览器中输入 localhost:9222打开手机正在浏览的网页列表，如下图：

4.2点击上图中的网站缩略图，就会跳转到Google的一个代理链接（链接可能被墙……，挂代理）就会打开如下图所示的控制台（点击查看大图）：

4.3这就和电脑上网页调试没什么差别了，鼠标经过DOM节点，手机上的布局同样也会高亮起来：

三、如何在Chrome浏览器安装第三方扩展

简单教你·Chrome浏览器如何安装第三方扩展程序

谷歌在2012年Chrome V21+开始禁止第三方扩展静默安装，2014年Chrome V30+开始任何非Chrome网上应用店(Chrome WebStore)下载的扩展将自动停用。自己瞎折腾一个Chrome插件crx打包之后拖进chrome://extensions安装启用一会儿就会被安静的自动停用，自己弄个插件在自己的Chrome浏览器上正常安装&测试都不能够。提交Chrome WebStore审核需要一次性付费5美元，用于验证开发者账户。插件发布审查周期需要等1-3个工作日，更新个插件也要等半小时。一个开发者帐号限制发布最多20个扩展。世界这么大，钱不是问题，我想更自由些。那么如何解决谷歌Chrome浏览器安装任意第三方扩展程序都自动停用的问题呢？

简单教你·Chrome浏览器如何安装第三方扩展程序

Chrome浏览器扩展程序内置的保护机制

Chrome内置浏览器安全&隐私保护机制，允许本地用户自定义配置扩展程序相关的安全策略。比如：用户不能安装任何已被列入黑名单的扩展程序（除非它们被加入白名单）。当然也可以通过在ExtensionInstallForcelist中指定扩展程序来强制Google Chrome自动安装这些扩展程序。强制安装列表中的扩展程序均会被安装（无论它们是否包含在黑名单内）。

扩展程序安装黑名单(ExtensionInstallBlacklist)

扩展程序安装白名单(ExtensionInstallWhitelist)

强制安装的扩展程序的列表(ExtensionInstallForcelist)

扩展程序、应用和用户脚本安装源(ExtensionInstallSources)

允许的应用/扩展程序类型(ExtensionAllowedTypes)

Ps:优先级&适用范围依次往下逐级递增。

方法一、添加指定扩展程序到Chrome白名单

通过配置扩展程序安装白名单(ExtensionInstallWhitelist)很简单就可以覆盖内置的扩展安装策略，从而正常安装启用指定第三方扩展程序。

Windows下以安装SiteTDKs插件为例:

打开chrome://extensions（扩展程序管理器）页面，拖放SiteTDKs.crx上来

找到被禁用的扩展，记下ID（设白名单用），这里复制kckpffebcgidblpkiipijljmgoililfj备用。

Windows Registry Editor Version 5.00

[HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Google\Chrome\ExtensionInstallWhitelist]

"1"="kckpffebcgidblpkiipijljmgoililfj"

复制以上代码保存为SiteTDKs.reg，双击导入注册表即可。

Ps:如果嫌逐一的去添加白名单实在麻烦，希望后续开发调试更多拓展程序方便，安装任意自定义的第三方扩展程序，配置一下扩展安装源(ExtensionInstallSources)就行了。

Windows Registry Editor Version 5.00

[HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Google\Chrome\ExtensionInstallSources]

复制以上代码保存为Policies.reg文件，双击导入注册表即可。

通过组策略Chrome管理模版，轻松配置Chrome浏览器众多的隐藏内置选项，更高效的使用Chrome，是官方推荐的最简便、可扩展调整的最佳方法。

首先下载管理模版并解压到硬盘任意可正常读写访问的地方。

Win+R打开运行程序对话框输入：gpedit.msc打开本地组策略编辑器，在管理模版上右键单击添加对应操作系统当前语言的管理模块，这里我们选择zh-CN中chrome.adm安装即可。

简单教你·Chrome浏览器如何安装第三方扩展程序

再展开计算机配置->管理模板->经典管理模版(ADM)-> Google-> Google Chrome->扩展程序

简单教你·Chrome浏览器如何安装第三方扩展程序

右侧双击打开“配置扩展程序安装白名单”->选中“已启用”，点击“显示…”双击列表中值这一列输入希望安装的第三方扩展程序的唯一ID确定保存->点击应用确定，然后退出整个本地组策略编辑器，无需重启Chrome浏览器，只需要重新打开扩展程序管理器就可以直接启用被禁的第三方扩展插件。

Tips:嫌逐一的为拓展添加白名单麻烦，配置扩展程序、应用和用户脚本安装源状态为启用值为：<all_urls>应用保存即可。值得一提的是Chrome组策略管理模版里头带了很多高大上的设置，请根据相应的配置提示自行挖掘尝试。

如何检查配置的政策是否正确有效？：打开chrome://policy查看相应的策略的状态是否为确定即可。

四、谷歌浏览器调试js的步骤 谷歌浏览器怎样调试javascript

1、首先我们打开开发者工具，你可以直接在页面上点击右键，然后选择审查元素或者在Chrome的工具中找到或者你直接记住这个快捷方式： Ctrl+Shift+I(或者Ctrl+Shift+J直接打开控制台)，或者直接按F12。

2、打开的开发者工具就长下面的样子，建议大家将开发者工具弹出作为一个独立的窗口。

这个就是查看、编辑页面上的元素，包括HTML和CSS。

左侧就是对页面HTML结构的查看与编辑，你可以直接在某个元素上双击修改元素的属性，或者你点右键选;Edit as Html;直接对元素的HTML进行编辑，或者删除某个元素，所有的修改都会即时在页面上得到呈现。

你还可以对某个元素进行监听，在JS对元素的属性或者HTML进行修改的时候，直接触发断点，跳转到对改元素进行修改的JS代码处。

Elements标签页的右侧可以对元素的CSS进行查看与编辑修改。

你还可以通过这里看到各CSS选择器设置的CSS值的覆盖情况。

下面的Metrics可以看到元素占的空间情况（宽、高、Padding、Margin）。

注意到上面的Properties没有？这个很有用哦，可以让你看到元素具有的方法与属性，比查API手册要方便得多哦（要注意某些方法和属性在IE、FireFox等其他浏览器下面的支持情况哦）。

Resources标签页可以查看到请求的资源情况，包括CSS、JS、图片等的内容，同时还可以查看到存储相关的如Cookies、HTML5的Database和LocalStore等，你可以对存储的内容编辑和删除。

这里的CSS文件有一个好玩的特性，你可以直接修改CSS文件，并且修改即时生效哦。

Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用，特别是在查看Ajax类请求的时候，非常有帮助。注意是在你打开Chrome开发者工具后发起的请求，才会在这里显示的哦。

点击左侧某一个具体去请求URL，可以看到该请求的详细HTTP请求情况：

我们可以在这里看到HTTP请求头、HTTP响应头、HTTP返回的内容等信息，对于开发、调试，都是很有用的。

很明显，这个标签页就是查看JS文件、调试JS代码的，直接看下图的说明。

还有你可以打开Javascript控制台，做一些其他的查看或者修改。

你甚至还可以为某一XHR请求或者某一事件设置断点。

注意这个Timeline的标签页不是指网络请求的时间响应情况哦（这个在Network标签页里查看），这个Timeline指的JS执行时间、页面元素渲染时间。

点击底部的Record就可以开始录制页面上执行的内容。

这个主要是做性能优化的，包括查看CPU执行时间与内存占用。

这个对于优化前端页面、加速网页加载速度很有用哦（相当与Yslow）。

点击run按钮，就可以开始分析页面，分析完了就可以看到分析结果了。

它甚至可以分析出页面上样式表中有哪些CSS是没有被使用的哦。

这个除了查看错误信息、打印调试信息（console.log()）、写一些测试脚本以外，还可以当作Javascript API查看用。

例如我想查看console都有哪些方法和属性，我可以直接在Console中输入;并执行：

怎么样，一目了然了吧？再例如我想查看日期函数都有哪些方法：

（注：注意在这里看到的某些方法和属性是ES5新增的，记得兼容其他浏览器的支持情况哦）

上述给大家讲解的便是谷歌浏览器调试js的步骤，有这个需求的用户们可以了解一下上面的内容吧，希望可以帮助到大家。

OK，本文到此结束，希望对大家有所帮助。