Browser API 故障排除 - Bright Data Docs

Browser API Debugger

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

在哪里可以找到

可通过以下两种方法启动我们的 Browser API Debugger：

通过控制面板手动启动
通过脚本远程启动

请在下面选择您喜欢的方式，了解更多信息：

通过控制面板手动启动
通过脚本远程启动

可以在 Bright Data 控制面板中轻松访问 Browser API Debugger。请按照以下步骤操作：

在控制面板中，转到我的代理视图
点击您的 Browser API 代理
点击访问参数选项卡
在右侧点击 “Chrome 开发工具调试器”按钮

Debugger 和 Chrome 开发工具入门

打开 Browser API 会话

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

启动 Debugger

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

连接您的实时浏览器会话

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

要直接从你的脚本访问并启动调试器会话，你需要发送 CDP 命令： Page.inspect。请参阅以下示例：

// Puppeteer - Inspect page using devtools
const page = await browser.newPage();
const client = await page.target().createCDPSession();
const {frameTree: {frame}} = await client.send('Page.getFrameTree', {});
const {url: inspectUrl} = await client.send('Page.inspect', {
    frameId: frame.id,
});
console.log(`Inspect session at ${inspectUrl}`);

// Playwright - Inspect page using devtools
const page = await browser.newPage();
const client = await page.context().newCDPSession(page);
const {frameTree: {frame}} = await client.send('Page.getFrameTree', {});
const {url: inspectUrl} = await client.send('Page.inspect', {
    frameId: frame.id,
});
console.log(`Inspect session at ${inspectUrl}`);

# Playwright - Inspect page using devtools
page = await browser.new_page()
client = await page.context.new_cdp_session(page)
frame_tree = await client.send('Page.getFrameTree', {})
frame_id = frame_tree['frameTree']['frame']['id']
inspect = await client.send('Page.inspect', {'frameId': frame_id})
inspect_url = inspect['url']
print('Inspect session at', inspect_url)

// PuppeteerSharp - Inspect page using devtools
var page = await browser.NewPageAsync();
var client = await page.Target.CreateCDPSessionAsync();
var frameTree = await client.SendAsync("Page.getFrameTree");
var frameId = frameTree!["frameTree"]!["frame"]!["id"]!;
var inspect = await client.SendAsync("Page.inspect", new { frameId = frameId });
var inspectUrl = inspect["url"]!;
Console.WriteLine($"Inspect session at {inspectUrl}");

// Playwright - Inspect page using devtools
var page = await browser.NewPageAsync();
var client = await page.Context.NewCDPSessionAsync(page);
var frameTree = await client.SendAsync("Page.getFrameTree");
var frameId = frameTree.Value
    .GetProperty("frameTree")
    .GetProperty("frame")
    .GetProperty("id")
    .GetString()!;
var inspect = await client.SendAsync("Page.inspect", new ()
{
    { "frameId", frameId },
});
var inspectUrl = inspect.Value
    .GetProperty("url")
    .GetString()!;
Console.WriteLine($"Inspect session at {inspectUrl}");

利用 Chrome 开发工具

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

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

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

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 的运行情况

错误代码

查看 Browser API 错误代码完整列表，包含每个代码的含义以及建议的操作。

常见问题解答

查看我们关于 Browser API 的常见问题解答

怎么做

了解更多关于浏览器自动化的常用库导航函数以及专门针对 Browser API 的示例

​Browser API Debugger

​在哪里可以找到

​Debugger 和 Chrome 开发工具入门

​利用 Chrome 开发工具

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

​Debugger 演示

​错误代码

​常见问题解答

​怎么做