我正在构建一个电子应用程序,我正在使用库(请求/ axios)来发出请求.我没想到的一件事是,在Chrome调试模式下运行时,在Node上发出这些请求将不会显示网络面板.是否有一种简单的方法可以
目前在我的服务器端电子应用程序我只看到以下内容
您可以包装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>
这将在视图的底部创建一个小部件.
请求更容易：
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&请求返回类似对象,您可以在渲染器端使用相同的功能.
代码在行动
Here’s a GitHub repository with the code implemented
解决方案1：Alt – 将网络请求写入渲染器的控制台
我还添加了一个选项,使用console.table将请求打印到开发工具控制台.以下是它的外观：
如果您不想在HTML中使用窗口小部件,则只能保留此方法.
解决方案2 – 使用–inspect标志运行电子
您也可以只使用run electron with the inspect flag,它允许您调试服务器代码并拥有自己的网络选项卡和“服务器端”HTTP请求.
为了看到它,运行你的电子应用程序如下：
electron --inspect=<port> your/app
如果你想立即在第一行中断,运行相同的命令,但用–inspect-brk替换–inspect.
运行命令后,打开任何Web浏览器并转到chrome：// inspect并选择检查其中存在的已启动Electron应用程序.
希望这有帮助.如果您有任何疑问,可以在评论中问我