各位老铁们好，相信很多人对谷歌浏览器的控制台都不是特别的了解，因此呢，今天就来为大家分享下关于谷歌浏览器的控制台以及谷歌浏览器的控制台怎样底部显示的问题知识，还望可以帮助大家，解决大家的一些困惑，下面一起来看看吧！

本文目录

1. chrome小窗口怎么实现 chrome浏览器小窗口设置方法
2. 如何使用chrome浏览器调试页面
3. 谷歌浏览器f12打不开
4. chrome浏览器是谷歌吗
5. 谷歌浏览器如何在下拉框展开时打开控制台
6. 打开chrome浏览器开发者工具的方式

一、chrome小窗口怎么实现 chrome浏览器小窗口设置方法

在电脑中使用chrome浏览器来观看视频玩游戏，这时就可以在小窗口浮动出来观看，同时也不影响自己的任务，还可以把网页中的某些内容单独拉出来进行对照或者参考，那么chrome小窗口怎么实现呢？下面小编就来告诉大家chrome浏览器小窗口设置方法。

这款32位chrome谷歌浏览器官方版是由谷歌开发的一款快速、安全的web浏览器，它极简的界面提供了极好的用户体验，结合了简约设计和先进技术的浏览器，可以使网络更快、更安全、更容易，如果你还在选择要用什么浏览器的话，这款32位chrome谷歌浏览器官方版绝对是你的首选，大家可以下载体验一下。

1、首先，要下载Separate Windows插件。

2、如果你下载到的是压缩文件，那么需要将压缩包解压。解压后，就能看到Separate Windows插件文件了，该离线插件的扩展名为.crx，如下图所示。

3、然后，打开Chrome浏览器，点击浏览器右上角的自定义及控制按钮。

4、在自定义及控制按钮的菜单列表中，依次单击打开【更多工具】【扩展程序】，这样就可以看到Chrome浏览器的扩展程序页面了。

5、直接用鼠标拖动Separate Windows插件，到该扩展程序页面。

（注意，是用鼠标左键按住该插件，直接拖到此页面再松开鼠标左键，而不是复制粘贴哦）

6、拖过来后，会弹出一个小窗口，询问“要添加Separate Windows吗”，点击“添加扩展程序”按钮。

7、这样，我们的扩展插件就成功添加到Chrome浏览器了，在浏览器的右上角也会多出来一个按钮。（该按钮只有在插件功能已启用的状态下，才会出现在浏览器右上角功能栏区域）

8、当我们想要用小窗播放视频或玩游戏时，只需要点击一下右上角的这个按钮，选择【select】，再选中视频或游戏界面区域就可以了。

上述就是chrome浏览器小窗口设置方法了，还有不懂得用户就可以根据小编的方法来操作吧，希望能够帮助到大家。

二、如何使用chrome浏览器调试页面

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

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

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

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

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

三、谷歌浏览器f12打不开

很多用户在使用浏览器浏览页面时候会出现想要进行调试的页面，但是当点击f12进行调试时候怎么都打不开，其实在将谷歌浏览器的开发者模式关闭就可以了。以下是小编整理的解决方法一起来看看吧~

1、首先打开谷歌浏览器在右上角找到“主菜单”按钮并点击，在出现的列表中选择“更多工具”选项并点击，然后字出现的小列表中选择“扩展程序”并点击进入下一页面。

2、在扩展程序页面中将右上角的“开发者模式”选项关闭。

3、然后重新启动谷歌浏览器，打开需要调试的页面，先点击地址栏然后再点击f12按键。

1、在键盘上按下“Ctrl+Shift+I”快捷键，打开调试页面即可。

可能你还想了解：谷歌浏览器不能下载文件解决方法|谷歌浏览器黑屏解决方法

以上就时小编整理的谷歌浏览器f12打不开解决方法了。

四、chrome浏览器是谷歌吗

1、Google Chrome，又称谷歌浏览器，是一个由Google（谷歌）公司开发的免费网页浏览器。“Chrome”是化学元素“铬”的英文名称；过去也用Chrome称呼浏览器的外框。

2、本软件的程式码是基于其他开放源代码软件所撰写，包括WebKit和Mozilla，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面谷歌浏览器作为现在最流行，最好用的浏览器之一，其用户何其多也。谷歌浏览器之所以这么受程序员欢迎自然是有其特点的。

3、浏览器的本质是一个展示网络资源的工具，一个简洁的界面会让用户更加专注于内容，而不被浏览器的外观所干扰。毫无疑问，Chome在这一点上就打败了不少对手。

4、Chrome作为 Google公司开发的浏览器，肯定会给自己的产品打打广告，但是 Google的产品确实质量过硬，我们可以在 Chrome上体验到很多优质的 Google产品，比如在线文档表格编辑器、网页的自动翻译、Gmail的离线版与桌面提醒等。

5、Chrome具有功能强大的开发者控制台，可以监控网络带宽，查看源代码并选择颜色以在线调整设计，还可以进行前端的断点调试。正是因为这强大的开发者控制台，Chrome受到了许多开发者的青睐。

6、Chrome具有大量扩展功能，从简单的广告拦截到各种小工具的自定义扩展，一应俱全，可以增强浏览器的功能以满足特殊需求。其中大部分的扩展程序都可以在 Chrome网上应用商店上找到。还可以雇用开发人员来构建自己的应用程序，以改善项目的工作流程。

五、谷歌浏览器如何在下拉框展开时打开控制台

谷歌浏览器按F12、点击N打开在下拉框展开时打开控制台。

F12打开调试台，在下拉框上右击，右击菜单显示后鼠标移动到调试台，点击N，因此谷歌浏览器按F12、点击N打开在下拉框展开时打开控制台。

谷歌浏览器是一款由Google公司开发的网页浏览器，该浏览器基于其他开源软件撰写。

六、打开chrome浏览器开发者工具的方式

1、Chrome提供的一些调试功能，在排查代码故障时非常有帮助。事实上，由于谷歌浏览器提供的调试工具太多，很多都被隐藏了起来，等待你去探索。

2、声明：本文已获作者Ferenc Almasi翻译授权。

3、Chrome DevTools（开发者工具）团队每月（

4、 ）都会在他们的网站上发布更新，你也可以在他们的官方 Twitter账户（

5、 ）上找到一些很棒的提示。如果你想了解更多关于 Chrome提供的工具的信息，我强烈推荐查看这两个信息来源。

6、在这篇文章中，我收集了 10个我经常使用但是别人可能不知道的功能。它们帮助我简化了工作流程，可以在更短的时间内完成更多的工作。

7、这里先从在控制台中保持日志说起。假设在重新加载页面之前或导航发生时出现了问题，你会尝试登录控制台，但所有内容都被清除了。解决方法很简单，但我很久以前就不知道了：

8、通常，当用户交互发生时会出现问题。捕捉这些事件来检查在交互中运行的位置和内容非常有帮助。幸运的是，我们可以通过访问 Sources选项卡，用 Ctrl P打开一个 js文件，并检查其中的相关事件：

9、对于 DOM操作也可以添加断点。通常可以断点在某节点接收到属性更改上，例如添加了某个 class。在一个大型代码仓库中搜索相关代码将耗费大量时间，其实你可以简单地为元素添加一个断点，然后剩下的交给 DevTools处理。

10、有时候我们对代码进行性能优化，会导致很多代码没有用了但是还没及时清除。在覆盖工具的帮助下，你可以分析资源并查看哪些行没有执行。如果你关注的不是所有交互，只执行你所关注的交互操作有助于你获取准确的覆盖率。你可以点击 Ctrl Shift P打开工具面板，然后点击重新加载图标开始记录，所有以红色显示的内容都不会被执行。

11、不必要的重绘也会导致性能问题。假设你的页面上有一个倒计时，每次更新都会导致整个页面重新绘制。你可以通过在 Render选项卡中启用 paint flashing来解决这些问题，并查看哪些元素触发了这些问题。

12、同样，Ctrl Shift P会弹出工具栏。

13、在 Rendering选项卡上启用重新绘制

14、既然上面讨论了渲染，那么让我们来看看如何调试 CSS动画。用 Ctrl Shift P打开工具菜单，输入“ animation”它将为你打开动画标签，这将记录任何发生在网站上的动画。你可以重播它们，看看它们的宽松程度，然后根据时间或持续时间调整：

15、我们经常需要与其他人分享截图来验证更改。如果你不得不重复多个步骤，这个任务可能会消耗时间：

16、这可以在 DevTools内部完成。你可以从整个页面、单个节点(被选中的节点)或视图中创建图像：

17、假设你正在调试一个问题，并且你的代码中有两个断点。你正在进行堆栈跟踪，你会发现堆栈信息中大多数来自核心框架文件，如 React或 jQuery。为了避免在调试器中包含这些核心文件，你可以对它们进行黑盒处理，这意味着 DevTools将跳过这些文件，以便你可以专注于自己的代码。

18、本地覆盖是我最喜欢的一个，我发现自己使用它越来越频繁。它是一个强大的工具，使你能够加载生产文件的本地副本，并使用它们来替代捆绑的副本。当一个问题只发生在特定的环境中而不能在本地复现时，这一点尤其有用。

19、你可以在“Source”选项卡下启用 Overrides（重写）。如果你没有看到 Overrides链接，点击 Page右侧的锯齿图标。你可以将漂亮的打印文件复制到你本地文件并对其进行扩展。重写将通过页面重新加载保持。

20、我发现自己一直在使用 Lighthouse面板，这是为了审计你的网站在各种指标：性能，PWA，可访问性，或搜索引擎优化。你还可以选择审计不同的设备以及模拟网络连接，它为你提供了哪些可以改进以及如何改进的参考。你可以在“Audits”选项卡下进入“灯塔”，如果你没有看到标签，只需点击锯齿符号来显示隐藏的标签。

21、生成报告后，可以将结果保存为 JSON文件，稍后导入以进行比较。

22、上面是必须知道的 10个 Chrome开发工具特性，它们帮助我简化了工作流程，并且在更短的时间内完成了更多的工作。

23、你每天使用的 Chrome开发者工具的功能是什么?请在评论中告诉我们。

24、 

25、作者简介：Ferenc Almasi，匈牙利前端开发者，热衷于开发和设计新的交互式应用程序。他还喜欢尝试新技术，创造简单而有吸引力的东西。

26、译者：明明如月，知名互联网公司 Java高级开发工程师，CSDN博客专家。

好了，本文到此结束，如果可以帮助到大家，还望关注本站哦！