tjx666 / awesome-chrome-extension-boilerplate

Use react + typescript + webpack to enhance your chrome extension development experience
MIT License
405 stars 45 forks source link

如何在VSCode中设置断点来调试React扩展? #40

Open baoblackcoal opened 1 year ago

baoblackcoal commented 1 year ago

设置断点进行调试比使用Console.log更强大,是否有一种方法来实现它?我在谷歌进行了搜索,但都没有找到有用的信息。

tjx666 commented 1 year ago

首先 chrome 插件有很多脚本类型,ni 想调试的是?

  1. content script
  2. option, popop 页面
  3. background

再就是我不建议使用 vscode 来 debug chrome 插件,因为很多 chrome 的代码都是 chrome:// 协议托管的。建议直接用 chrome debug。

如果你想尝试,可以参考:https://github.com/microsoft/vscode-chrome-debug

baoblackcoal commented 1 year ago

主要是chrome debug 调试content , 断点打到content按钮的onClick函数,触发不了,popup和background是可以触发的。vscode-chrome-debug有尝试过,但也对于content按钮的onClick函数是不能触发。