解决方案1 - 创建自己的
您可以包装axios函数并将事件发送到渲染器进程
主要电子过程
const electron = require('electron');
const {
app,
BrowserWindow,
ipcMain
} = electron;
const _axios = require('request-promise');
const axios = {
get: (url, params) => _axios.get(url, params).then(sendData),
post: (url, params) => _axios.post(url, params).then(sendData),
delete: (url, params) => _axios.delete(url, params).then(sendData),
put: (url, params) => _axios.put(url, params).then(sendData)
// ...
};
function sendData() {
return (data) => {
mainWindow.webContents.send('network', data);
return data;
};
}
渲染器进程(index.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css"
rel="stylesheet">
<style>
.kb-debug-widget {
position: fixed;
bottom: 0;
height: 200px;
overflow-x: hidden;
overflow-y: auto;
background: grey;
left: 0;
right: 0;
font-size: 10px;
}
</style>
</head>
<body>
<div class="kb-debug-widget">
<table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth"
id="network">
<tr>
<th>Name</th>
<th>Method</th>
<th>Status</th>
<th>Type</th>
<th>Body</th>
</tr>
</table>
</div>
<script>
require('./renderer.js');
var {
ipcRenderer,
remote
} = require('electron');
ipcRenderer.on('network', (event, response) => {
const networkElement = document.getElementById('network');
// print whatever you want here!
networkElement.innerHTML +=
`
<tr>
<td>${response.request.href}</td>
<td>${response.request.method}</td>
<td>${response.statusCode}</td>
<td>${response.headers['content-type']}</td>
<td>${response. data}</td>
</tr>
`;
// you can also print the network requests to the console with a decent UI by using console.table:
console.table({
name: response.request.href,
method: response.request.method,
status: response.statusCode,
type: response.headers['content-type'],
body: response. data,
});
});
</script>
</body>
</html>
这将在视图的底部创建一个小部件.
它更容易request:
const _request = require('request-promise');
const _axios = require('request-promise');
// this should cover all sub-methods
const request = (params, callback) => {
return _request(params, callback)
.on('response', (response) => {
mainWindow.webContents.send('network', response);
return response;
});
};
由于这两个axios与request返回相似的对象,你可以使用渲染器侧相同的功能.
代码在行动
解决方案1:Alt - 将网络请求写入渲染器的控制台
我还添加了一个选项,用于将请求打印到开发工具控制台console.table.以下是它的外观:
如果您不想在HTML中使用窗口小部件,则只能保留此方法.
解决方案2 - 用--inspect旗帜运行电子
您还可以使用inspect标志运行电子,这允许您调试服务器代码并拥有自己的网络选项卡和"服务器端"HTTP请求.
为了看到它,运行你的电子应用程序如下:
electron --inspect=<port> your/app
如果你想立即在第一行中断,运行相同的命令,但替换--inspect为--inspect-brk.
运行命令后,打开任何Web浏览器,然后转到chrome://inspect并选择检查其中存在的已启动Electron应用程序.
希望这有帮助.如果您有任何疑问,可以在评论中问我
- 我想使用解决方案 2，但对我来说，通过 --inspect-brk 启动时没有“网络”选项卡 (4认同)
- 我也尝试过，用这种方法我没有得到“网络”选项卡。我需要从 ipcMain 调用 .send('network') 吗？ (3认同)
- 我的检查器中没有网络面板。请赐教。使用电子Webpack (3认同)
- 使用 --inspect 标志运行时，如何打开服务器代码的网络选项卡？ (2认同)
- @ShaneGannon @Sw0ut 我想通了。`--inspect` 标志仅适用于 Electron 的 `Node.js` 部分。如果您也想要前端部分，请执行“--inspect=9229 --remote-debugging-port=9222”。然后在“chrome://inspect”中，确保有“localhost:9222”和“localhost:9229”选项 (2认同)
| 归档时间： |
|
| 查看次数： |
1661 次 |
| 最近记录： |