chrome怎么调试关闭的页面？

Posted 2023-04-17

我用vue要调试destroyed方法，但是用devtools，页面关闭了之后devtools也关闭了，无法查看请求情况了，怎么办

你只需要把需要调试destroyed方法的组件随便挂载到一个路由上，然后在里面打断点。调试的话可以在从当前路由跳转到另外一个路由，然后便会调用destroyed方法，此时做调试。 参考技术A 可以选择在Chrome中给所在代码行打断点（记得打在请求回调的时间函数里，外面也打一个）阻止程序的执行。但一般来说，如果是异步请求，那么执行到断点所在行的时候，组件本身已经被销毁了（destroyed函数只要返回就会销毁组件），那么这时候本身就无法查看此组件的状态了。追问

我是想要添加关闭浏览器的监听，我在destoryed和beforeunload中添加了方法，但是在关闭浏览器标签页的时候经常没有走

puppeteer快速调试

在我们使用chrome作为爬虫获取网页数据时，往往需如下几步。

1. 打开chrome
2. 导航至目标页面
3. 等待目标页面加载完成
4. 解析目标页面数据
5. 保存目标页面数据
6. 关闭chrome

我们实际的编码往往集中在第4步，并且，在开发过程中，解析网页数据往往不是一步到位的，需要经过反复多次调试才行。如果每次调试都需要经过这一个过程就显得效率过低。

此时，我们希望有一种类似调试程序中的"附加到进程"类似的方法，不必每次都打开chrome，跳转到目标页面，直接进行第4步，解析现有页面。本文这里就介绍一个这样的方法。

以远程调试的方式启动chrome：

"C:Program Files (x86)GoogleChromeApplicationChrome.exe" --remote-debugging-port=9222 --user-data-dir="r:chromecache"

手动跳转到目标网页。

此时就可以通过http://127.0.0.1:9222/json查看调试信息了。

[{
"description": "",
"devtoolsFrontendUrl": "/devtools/inspector.html?ws=127.0.0.1:9222/devtools/page/9067DC581E400BFF607DC63792BBCD2E",
"faviconUrl": "https://tianfang.cnblogs.com/favicon.ico",
"id": "9067DC581E400BFF607DC63792BBCD2E",
"title": "天方 - 博客园",
"type": "page",
"url": "https://tianfang.cnblogs.com/",
"webSocketDebuggerUrl": "ws://127.0.0.1:9222/devtools/page/9067DC581E400BFF607DC63792BBCD2E"
}]

调试地址为： "ws://127.0.0.1:9222/devtools/page/9067DC581E400BFF607DC63792BBCD2E"。在实际运行过程中，可以通过axios库来自动获取这个地址：

const axios = require(‘axios‘);

async function get_debug_url() {
var rsp = await axios.get(‘http://127.0.0.1:9222/json‘);
return rsp.data[0].webSocketDebuggerUrl;
}

利用puppeteer.connect(options)连接，获得的是一个browser对象，在利用browser.pages()获取当前打开的page，直接操作page即可。

const puppeteer = require(‘puppeteer-core‘);

async function run() {
var ws = await get_debug_url();
const browser = await puppeteer.connect({
"browserWSEndpoint": ws,
"defaultViewport": { width: 1000, height: 600 }
});
const pages = await browser.pages();
const page = pages[0];
await page.screenshot({ path: ‘screen.png‘ });
console.log("complte");
};

run();

究其本质，这里和我文章使用CefSharp在.Net程序中嵌入Chrome浏览器（六）——调试中的远程调试的原理是一样的。这里我虽然是用的puppeteer为例，其它基于Chrome DevTools Protocol的工具应该也是一样可以用的。

?