如何使用DevTools或其他调试器调试Chrome扩展程序?

时间:2019-01-09 14:27:40

标签: google-chrome-extension google-chrome-devtools

是否可以使用调试器(断点和移入/移出)来调试chrome扩展
在console.log旁边?

1 个答案:

答案 0 :(得分:1)

Chrome 70.x对chrome后台脚本的调试已中断,尤其是当您动态加载它们且它们不在清单中时。开张票将其修好;但是他们并不是很有帮助;但是找到了解决方法...

  1. 在您的background.js脚本中放置一个console.log(“ yourvariablenamehere”)。
  2. 按F12键以打开固定在网页底部的开发工具。
  3. 通过popup.html中的按钮加载后台脚本。像这样的按钮事件...

    var guid = CreateGuid();         chrome.tabs.executeScript(null,{文件:“ script / jquery-3.3.1.js”},函数(){
                $ .get(“ script / scrollPage.js?ver =” + guid,function(sScriptBody,textStatus,jsXHR){                 chrome.tabs.executeScript(null,{代码:sScriptBody});             },“ text”);         });

  4. 在开发工具控制台中,您应该看到已记录的变量。与记录的消息相同的是一个虚拟机,上面有一个数字,即一个虚拟脚本页面。选择该VM页面,然后进入后台脚本!现在,在虚拟脚本页面中放置一个断点,在popup.html中单击相同的按钮,它将被命中。然后,当您重新加载弹出窗口并执行后台脚本时,将命中断点!

希望这会有所帮助。