Tampermonkey console.log 似乎与 chrome 开发工具中的不一样答案

【问题标题】：Tampermonkey console.log doesn't seem to be the same as the one in chrome dev toolsTampermonkey console.log 似乎与 chrome 开发工具中的不一样
【发布时间】：2021-03-12 17:41:17
【问题描述】：

这是我目前所拥有的：

function loadScript(url) {
    return new Promise((resolve, reject) => {
        let script = document.createElement('script');
        script.onload = function() {
            resolve();
        };
        script.src = url;
        document.head.appendChild(script);
    });
};

loadScript("https://rawgit2.com/icodeforlove/template-colors-web/master/dist-browser/template-colors.js").then(load);

function load() {
    function logThing(pkt) {
        pkt = pkt.join(', ');
        console.log(c`${'['.red.bold}${pkt.green.bold}${']'.red.bold}`);
    };
    logThing(["Test", "thing", "here"]);
}

通常，在开发工具控制台中，它会这样记录：

但是使用 tampermonkey 它会记录以下内容：

为什么 Tampermonkey 会这样做？我到底该如何解决这个问题？

另外请记住，不使用 console.log 看起来像这样：

【问题讨论】：

看起来像 Tampermonkey 中的一个错误。作为一种解决方法，您可以从虚拟 iframe example 中提取原始 console.log。

标签： javascript tampermonkey

【解决方案1】：

改为使用@require 加载脚本：

// ==UserScript==
// @name         StackOverflow question 66604679
// @version      0.1
// @author       Wolfy
// @match        https://stackoverflow.com/questions/66604679/tampermonkey-console-log-doesnt-seem-to-be-the-same-as-the-one-in-chrome-dev-to
// @require      https://rawgit2.com/icodeforlove/template-colors-web/master/dist-browser/template-colors.js
// @grant        none
// ==/UserScript==
/* globals c */

(function() {    
  function logThing(wordsArray) {
    const stringToPrint = wordsArray.join(',');
    console.log(c`${'['.red.bold}${stringToPrint.green.bold}${']'.red.bold}`);
  }
  logThing(['Test', 'thing', 'here']);
})();

原因是在您的脚本中，<script> 是在页面上下文中添加的，因此它不会修补 TM 的控制台。

【讨论】：