chrome 插件开发 devtools.js中console.log() 打印日志不显示解决

一、项目简单布局如下：

manifest.json

{
    "manifest_version": 3,
    "name": "test",
    "description": "Base Level Extension",
    "version": "1.0",
    "action": {
      "default_popup": "popup/index_popup.html",
      "default_icon": "images/hello_extensions.png"
    },
    "permissions": [
      "webRequest",
      "tabs",
      "activeTab"
    ],
    "devtools_page": "devtools.html"
  }

devtools.html

<html>
    <head>
      <meta charset="UTF-8">
    </head>
    <body>
      <script src="devtools.js"></script>
    </body>
</html>

devtools.js

chrome.devtools.panels.create('我的控制台', 'icon.png', 'panel.html', () => {
    console.log('user switched to this panel');
  });

var aaa = {"a":"123","b":"456"};
//  问题一
console.log(aaa)

// 问题二
chrome.devtools.inspectedWindow.eval(
  'console.log(' + aaa + ');'
);
chrome.devtools.inspectedWindow.eval(
  'console.log("' + aaa + '");'
);

问题一、发现console.log的日志没有显示在页面下的控制台。

解决方法：

通过对控制台新建的标签页面：“我的控制台”，鼠标右键--》检查；在新弹出的控制台页面里面即可查看

 

 问题二、使用 chrome.devtools.inspectedWindow.eval  api 无法在当前页面控制台窗口打印对象

第一个没有任何输出、第二个打印输出为：[object Object]

解决方法，修改代码如下：

chrome.devtools.panels.create('我的控制台', 'icon.png', 'panel.html', () => {
    console.log('user switched to this panel');
  });

var aaa = {"a":"123","b":"456"};
//  问题一
console.log(aaa)

// 问题二
chrome.devtools.inspectedWindow.eval(
  'console.log(' + aaa + ');'
);
chrome.devtools.inspectedWindow.eval(
  'console.log("' + aaa + '");'
);

// 解决对象打印问题（这种方法可能会报错导致部分日志打不出来）
chrome.devtools.inspectedWindow.eval(
  "console.log(JSON.parse('" + JSON.stringify(aaa) + "'));"
);
// 解决对象打印问题（该方法能打印出所有日志）
chrome.devtools.inspectedWindow.eval(
     'console.log(' + JSON.stringify(aaa) + ')'
)

控制台输出为：

 

posted @ 2024-05-10 11:45  远洪  阅读(2010)  评论(0)    收藏  举报