当前位置：文江博客话题详情

Google Chrome 中的用户脚本调试

发布于 2024-08-08 01:47:03 字数 73 浏览 3 评论 0原文

在 Chrome 中调试自定义用户脚本（又名 Greasemonkey）的最佳方法是什么？有没有办法在开发者工具中启用用户脚本跟踪？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦过后 2024-08-15 01:47:03

您想要什么样的调试？正如 Alex 所说，用户脚本将在与调试页面本身相同的上下文中列出。如果您转到开发人员工具中的“脚本”选项卡，您将看到一个带有下拉菜单的栏，可让您选择要调试的适当 JavaScript 文件。此类脚本的网址应类似于 chrome-extension:///

此外，如果您想在所有页面的同一位置登录，您可以尝试将脚本构建为完整的 Chrome 扩展，使用用户脚本作为内容脚本。然后，您可以从内容脚本向后台页面发送消息并在那里登录。例如，如果这是您的内容脚本：

function log(text) {
  chrome.extension.sendRequest({'action' : 'log', 'text' : text}, function() {});
};
log("Content script loaded: " + window.location.href);

这是您的后台页面：

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <script>
      function onRequest(request, sender, callback) {
        if (request.action && request.action == 'log') {
          console.log(request.text);
        }
      };

      chrome.extension.onRequest.addListener(onRequest);
    </script>
  </body>
</html>

您将在后台页面的日志中看到内容脚本的每次加载。

What kind of debugging do you want? Like Alex said, user scripts will be listed in the same context as debugging the page itself. If you go to the "scripts" tab in the developer tools, you'll see a bar with a dropdown which will allow you to select the appropriate javascript file you wish to debug. Such scripts should have urls that look like chrome-extension://<hash>/<script file>.js. Those scripts will also log to the console of the page they're embedded on.

Additionally, if you want to log in the same place for all pages, you can try building your script as a full chrome extension, using the user script as a content script. Then you can send a message from your content script to your background page and log there. For example, if this were your content script:

function log(text) {
  chrome.extension.sendRequest({'action' : 'log', 'text' : text}, function() {});
};
log("Content script loaded: " + window.location.href);

And this were your background page:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <script>
      function onRequest(request, sender, callback) {
        if (request.action && request.action == 'log') {
          console.log(request.text);
        }
      };

      chrome.extension.onRequest.addListener(onRequest);
    </script>
  </body>
</html>

You would see each load of the content script in the background page's log.

回复收藏 0 原文

小糖芽 2024-08-15 01:47:03

我在脚本中使用以下函数来实现跨浏览器 GM Api 兼容性：

function testGM() {
var isGM = typeof GM_getValue != 'undefined' && typeof GM_getValue('a', 'b') != 'undefined';
if(typeof(unsafeWindow) == 'undefined') { unsafeWindow = window; }
if(!isGM) { log = function(msg) { try { unsafeWindow.console.log(msg); } catch(e) {} }; } else { log = GM_log; }
if(window.opera) log = opera.postError;
setValue = isGM ? GM_setValue : function (name, value) { return localStorage.setItem(name, value) };
getValue = isGM ? GM_getValue : function(name, def){ var s = localStorage.getItem(name); return s == null ? def : s };
}
testGM();

它不是我的。这是礼貌的 sizzemctwizzle @ userscripts.org

我只使用 log，getValue 和setValue 截至目前，因此该函数中只有这些树。
您还可以查看他的指南。
或者您可以查看 GIJoe 跨浏览器 GM Api 也是如此。

i user the following function in my scripts for cross-browser GM Api compatibility:

function testGM() {
var isGM = typeof GM_getValue != 'undefined' && typeof GM_getValue('a', 'b') != 'undefined';
if(typeof(unsafeWindow) == 'undefined') { unsafeWindow = window; }
if(!isGM) { log = function(msg) { try { unsafeWindow.console.log(msg); } catch(e) {} }; } else { log = GM_log; }
if(window.opera) log = opera.postError;
setValue = isGM ? GM_setValue : function (name, value) { return localStorage.setItem(name, value) };
getValue = isGM ? GM_getValue : function(name, def){ var s = localStorage.getItem(name); return s == null ? def : s };
}
testGM();

it's not mine. it's courtesy sizzemctwizzle @ userscripts.org

i only use log, getValue & setValue as of now, hence only these tree in that function.
You can also check out his guide.
Or you can checkout GIJoe's cross-browser GM Api too.

回复收藏 0 原文