大佬教程收集整理的这篇文章主要介绍了node.js – 在调试Electron / 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,delete: (url,params) => _axios.delete(url,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将请求打印到开发工具控制台.以下是它的外观:
解决方案2 – 使用–inspect标志运行电子
您也可以只使用run electron with the inspect
flag,它允许您调试服务器代码并拥有自己的网络选项卡和“服务器端”http请求.
为了看到它,运行你的电子应用程序如下:
electron --inspect=<port> your/app
如果你想立即在第一行中断,运行相同的命令,但用–inspect-brk替换–inspect.
运行命令后,打开任何Web浏览器并转到chrome:// inspect并选择检查其中存在的已启动Electron应用程序.
希望这有帮助.如果您有任何疑问,可以在评论中问我
以上是大佬教程为你收集整理的node.js – 在调试Electron / Node应用程序时如何显示网络面板全部内容,希望文章能够帮你解决node.js – 在调试Electron / Node应用程序时如何显示网络面板所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。