当前位置: 首页 > news >正文

webstorm开发electron,调试主进程方案

官网教程地址:https://www.electronjs.org/zh/docs/latest/tutorial/debugging-main-process

我只能说官网太看得起人了,整这么简易的教程……

命令行开关

第一步还是要按要求在我们的package.json里加上端口监听:–inspect=5858

我的命令如下:

"builder-start": "nodemon --exec electron --inspect=5858 . --watch ./ --ext .js,.html,.css,.vue",

有效的起始只有:

 electron --inspect=5858

其他的是另一个插件工具,用不到nodemon的可以忽略。(nodemon具体用法可查看往期文章)

外部调试器

官网下一步是配置外部调试器,我的IDE是webstorm,所以只能按官网说的访问chrome://inspect。

在谷歌浏览器直接输入“chrome://inspect”。打开页面如下:

在这里插入图片描述
到这里就可以不再看官网了,因为没有后续教程了。自力更生!

外部调试器使用

点击链接:Open dedicated DevTools for Node ,会打开一个调试node程序的窗口。
在这里插入图片描述

打开的窗口如图:

在这里插入图片描述

在这里点击按钮:Add connection,把我们的5858端口维护进去,如图:

在这里插入图片描述

维护好后,等一会(有可能十几二十秒),外面的chrome://inspect界面出现下面红线所示内容,说明配置成功。

在这里插入图片描述

下一步打开我们的项目,这个页面就会监听到我们项目的一些基本信息,如下图所示:

在这里插入图片描述

这时候再去看我们前面的devtools窗口,发现控制台已经出现了打印信息,说明远端调试连接成功。(我理解的chrome和webstorm之间通过端口5858建立了远端调试连接)。

在这里插入图片描述

这时候,不管是在devtools中打断点,还是在webstorm中写debugger,都可以进入相应的断点位置。(偶尔有失效的时候,重复一下上面步骤)

在这里插入图片描述

56行为我写的debugger,58行是在devtools里打的断点。都生效了。

devtools中查找文件

调试基本功,放张图,有需要的同学自行查找吧:

在这里插入图片描述

http://www.lryc.cn/news/8865.html

相关文章:

  • 2W字正则表达式基础知识总结,这一篇就够了!!(含前端常用案例,建议收藏)
  • 自学web前端觉得好难,可能你遇到了这些困境
  • ASEMI中低压MOS管18N20参数,18N20封装,18N20尺寸
  • [NetBackup]客户端安装后server无法连通client
  • 黑马Java后端项目实战--在线聊天交友
  • 【实战系列 2】Yapi接口管理平台Getshell-Linux后门权限维持与痕迹清除
  • 设计模式之抽象工厂模式(C++)
  • Kotlin新手教程一(Kotlin简介及环境搭建)
  • 【虚拟仿真】Unity3D打包WEBGL实现全屏切换
  • java对象内存结构分析与大小计算
  • RabbitMQ学习(七):交换器
  • cmd命令大全
  • Git的使用方法(保姆级)
  • TypeScript 学习之泛型
  • 新手学习node.js基础,node.js安装过程,node.js运行环境及javascript运行环境.
  • Maven的安装步骤(保姆级安装教程)
  • Axure教程(一)——线框图与高保真原型图制作
  • wholeaked:一款能够追责数据泄露的文件共享工具
  • 动态规划——股票问题全解
  • 想做游戏开发要深入c/c++还是c#?
  • 【JMeter】【Mac】如何在Mac上打开JMeter
  • JAVA面试八股文一(并发与线程)
  • C语言二级指针
  • [java-面试]初级、中级、高级具备的技术栈和知识点
  • 「5」线性代数(期末复习)
  • 记一次20撸240的沙雕威胁情报提交(2019年老文)
  • 佳能镜头EOS系统EF协议逆向工程(三)解码算法
  • 搞互联网吧,线下生意真不是人干的
  • MySQL性能调优与设计——MySQL中的索引
  • 这5个代码技巧,让我的 Python 加速了很多倍