​
Browser API Debugger

网络抓取项目通常需要与目标网站进行复杂的交互，调试对于识别和解决开发过程中发现的问题至关重要。 Browser API Debugger 是一项宝贵的资源，它使您能够与 Chrome 浏览器开发工具一起检查、分析和微调代码，从而实现更好的控制、可见性和效率。

​
在哪里可以找到

可通过以下两种方法启动我们的 Browser API Debugger：
  1. 通过控制面板手动启动
  2. 通过脚本远程启动
请在下面选择您喜欢的方式，了解更多信息：
可以在 Bright Data 控制面板中轻松访问 Browser API Debugger。 请按照以下步骤操作：
  1. 在控制面板中，转到我的代理视图
  2. 点击您的 Browser API 代理
  3. 点击访问参数选项卡
  4. 在右侧点击 “Chrome 开发工具调试器”按钮
chrome-devtools-debugger.png

​
Debugger 和 Chrome 开发工具入门

1

打开 Browser API 会话

  • 确保有一个活跃的 Browser API 会话
  • 如果您还不知道如何启动 Browser API 会话，请参阅我们的快速入门指南。
2

启动 Debugger

  • 会话启动并运行后，就可以启动 Debugger 了。
  • 点击访问参数选项卡中的 Debugger 按钮，启动 Browser API Debugger 界面（参见上面的截图）
3

连接您的实时浏览器会话

  • 在 Debugger 界面中，您将看到实时 Browser API 会话的列表。
  • 选择要调试的首选会话
  • 点击会话链接或将其复制/粘贴到所选浏览器中，这将在 Debugger 和所选会话之间建立连接。

​
利用 Chrome 开发工具

  • 将 Browser API Debugger 连接到实时会话后，您就可以使用 Chrome 开发工具的强大功能了。
  • 利用开发工具界面检查 HTML 元素、分析网络请求、调试 JavaScript 代码并监控性能。 利用断点、控制台日志和其他调试技术来识别和解决代码中的问题。
test-sites.png

​
在本地自动启动开发工具以查看实时浏览器会话

如果您想在每次会话中自动启动开发工具以查看实时浏览器会话，可以集成以下代码片段：
NodeJS - Puppeteer
// Launch devtools locally

const { exec } = require('child_process');
const chromeExecutable = 'google-chrome';

const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
const openDevtools = async (page, client) => {
    // get current frameId
    const frameId = page.mainFrame()._id;
    // get URL for devtools from Browser API
    const { url: inspectUrl } = await client.send('Page.inspect', { frameId });
    // open devtools URL in local chrome
    exec(`"${chromeExecutable}" "${inspectUrl}"`, error => {
        if (error)
            throw new Error('Unable to open devtools: ' + error);
    });
    // wait for devtools ui to load
    await delay(5000);
};

const page = await browser.newPage();
const client = await page.target().createCDPSession();
await openDevtools(page, client);
await page.goto('http://example.com');

​
Debugger 演示

下面就来看看 Browser API Debugger 的运行情况

​
错误代码

下面分析一些您可能会收到的常见错误代码：
错误代码含义您能做些什么？
407远程浏览器的端口有问题请检查您的远程浏览器的端口。Browser API 的正确端口是默认端口：9222，或者如果使用 Selenium，则使用端口：9515。
403身份验证错误从 Bright Data 控制面板检查身份验证凭据（用户名和密码），并检查是否使用了正确的 “Browser API” 区域。
503服务不可用我们现在可能正在扩展浏览器以满足需求。 请尝试在 1 分钟后重新连接。

​
常见问题解答

查看有关 Browser API 的常见问题:
https://docs.brightdata.ccom/scraping-automation/scraping-browser/faqs

​
怎么做

进一步了解常用库导航功能和浏览器自动化示例，特别是用于 Browser API 的示例:
https://docs.brightdata.com/cn/scraping-automation/scraping-browser/code-examples