如何检查chrome中devtools源代码的console.log输出

Question

Have anyone known where is the output of console.log in the InspectorBackend.js of devtools code. I found the console panel in the chrome have no any output.

for example, I have set dumpInspectorProtocolMessages = true, and and also add console.error in the function _wrapCallbackAndSendMessageObject as following:

   console.error("show error on console");
   if (this.dumpInspectorProtocolMessages)
        console.log("frontend: " + JSON.stringify(messageObject));

I think the console panel in the chrome was loaded after above function, so where is the output, how to check it?

Btw, the function above is devtools source code, and what i want to see is the log output of devtools source code.

thanks

Answer 1

In order to see output of console.log 's located right into DevTools own source code, you need to open DevTools on DevTools. It's pretty easy:

1. Undock DevTools window. (This is important: otherwise step 2 won't be possible)
2. Right-click inside undocked devtools and click "inspect element".

This will open a second DevTools window which will be inspecting first DevTools; all the output from the first devtools frontend could be found there.

Answer 2

在谷歌浏览器键盘上点击F12并导航到控制台选项卡或右键单击您的页面，然后单击inspect element

Answer 3

您可以使用shift+ctrl+i ，它打开底部的开发人员工具并找到Console选项卡单击以查看控制台日志

Answer 4

In Google chrome use F12. For more check this link Opening DevTools .