Menu
I am building an electron application and I am using libraries (request/axios) for making requests. One thing I didn't expect is that making these requests on Node won't display a Network Panel when running in chrome debug mode. Is there a simple way to tell debug mode to turn on a network panel for tuning into https requests(I assume these libraries all use https)?
currently on my server side electron app i only see the following
466
We have two processes that run our application – the main process and the renderer process. Since the renderer process is the one being executed in our browser window, we can use the Chrome Devtools to debug it. To open DevTools, use the shortcut "Ctrl+Shift+I" or the <F12> key.
After installing run it using node-inspector command as shown below. As you can see in the above figure, it will display an URL for debugging purpose. So, point your browser to http://127.0.0.1:8080/?ws=127.0.0.1:8080&port=5858 and start debugging. Sometimes, port 8080 might not be available on your computer.
you can wrap your axios functions and send an event to your renderer process
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;
};
}
<!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>
This will create a widget on the bottom of your view.
it's even easier with 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;
});
};
Since both axios & request return similar objects, you can use the same function on the renderer side.
Here's a GitHub repository with the code implemented
I also added an option to print the requests to the dev tools console, with console.table. Here's how it looks:
You can leave only this method if you don't want a widget inside your HTML.
--inspect flagYou can also just run electron with the inspect flag, which allows you to debug your server code and has its own network tab with the "server-side" HTTP requests.
In order to see it, run your electron application like so:
electron --inspect=<port> your/app
if you want to immediatly break on the first line, run the same command but replace --inspect with --inspect-brk.
After running the command, open any web-browser and go to chrome://inspect and selecting to inspect the launched Electron app present there.
134
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
