📜  chrome 远程调试 (1)

📅  最后修改于: 2023-12-03 15:29:59.249000             🧑  作者: Mango

Chrome 远程调试简介

Chrome 远程调试是一种可以帮助程序员在不同设备或者不同浏览器上调试应用程序的工具。使用 Chrome 远程调试,开发者可以在 Chrome 浏览器上远程调试自己的代码,查看实时日志,修改代码并进行测试。

安装 Chrome 远程调试工具

要使用 Chrome 远程调试功能,需要先安装谷歌 Chrome 浏览器和其相应的远程调试工具。

步骤 1:安装谷歌 Chrome 浏览器

安装谷歌 Chrome 浏览器可在官网下载,链接如下:

https://www.google.com/chrome/

步骤 2:开启 Chrome 远程调试功能

在浏览器中输入 chrome://flags,找到“DevTools”选项,将其设置为“Enabled”,并重新启动浏览器。

步骤 3:启动 Chrome 远程调试
  1. 在终端中输入以下命令以开启 Chrome 远程调试:

    /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
    
  2. 访问 http://localhost:9222,可以看到当前 Chrome 浏览器已经被远程调试开启。

远程调试示例

以下是一个示例,演示如何在 Chrome 中进行远程调试。

步骤 1:编写 JavaScript 代码

在本地编写一个简单的 JavaScript 代码,如下:

function add(a, b) {
    return a + b;
}

console.log(add(2, 3));
步骤 2:启动调试
  1. 开启谷歌浏览器,并启动远程调试。

  2. 在浏览器中输入 chrome://inspect,会看到一个列表,其中打开 about:blank

步骤 3:调试 JavaScript
  1. 在浏览器上打开 about:blank,此时会新开一个选项卡,并提示暂停调试器(因为代码没有停在断点上)。

  2. 返回到远程调试器页面,在打开的选项卡中打开开发者工具。

  3. 点击“Sources”选项,找到刚才编写的 JavaScript 文件,并在其中加入一个断点。

  4. 返回到 about:blank 选项卡,此时代码会停在断点处。

  5. 在开发者工具中查看变量等信息,调试 JavaScript 代码。

结语

以上就是关于 Chrome 远程调试的介绍。使用 Chrome 远程调试,可以更加方便快捷地进行程序开发和调试,提高开发效率,是每一位程序员必备工具之一。