vscode 切换开发者工具_VSCode插件开发全攻略（六）开发调试技巧

前言

在介绍完一些比较简单的内容点之后，我觉得有必要先和大家介绍一些开发中遇到的一些细节问题以及技巧，特别是后面一章节将要介绍WebView的知识，这个坑会比较多，避免大家走弯路。

开发方式

最理想的方式是准备双显示器，一个写代码，一个运行插件，实践证明这种方式开发效率会提升很多，每次修改完代码之后直接Ctrl+R重新加载即可，非常方便。

日志查看

就我目前遇到的情况来看，vscode日志主要有这5种：

旧窗口的调试控制台

扩展里的console.log()日志一般输出在这里，但是有很大的限制，结构稍微深一点的对象在这里了就显示不了：

Unable to log remote console arguments Output omitted for an object that cannot be inspected (Error: [sxei.vscode-plugin-demo]: Proposed API is only available when running out of dev or with the following command line switch: --enable-proposed-api sxei.vscode-plugin-demo)

这里只能看成是新窗口开发者控制台日志的一种快捷显示，以下是旧窗口调试控制台显示的内容：

而对应的内容在新窗口的开发者控制台显示如下：

可以看到，结构较深的对象即使在控制台也无法显示，目前发现的唯一比较好的方法就是在输出的地方打一个断点，然后运行的时候会自动卡在这里，鼠标悬停就可以查看对象的内容。

新窗口的调试控制台

一般没什么扩展相关日志会输出在这里。

旧窗口的开发者控制台

快捷键Ctrl+Alt+I，这里一般显示vscode本身一些日志，和扩展相关的不会显示在这里，所以这个也不用太多关心。

新窗口的开发者控制台

快捷键也是Ctrl+Alt+I，不记得的可以从帮助 -> 切换开发人员工具找到。这个控制台很重要，有时候如果发现你的代码莫名其妙没生效，很有可能是报错了，这种报错是不会显示在旧窗口调试控制台的，如果你不知道到这里来查看日志，那么你只能一脸懵逼的到处乱试了，调试控制台只打印常规日志，语法错误并不会显示在这里。

例如，我在跳转定义实现前人为制造一个错误：

function provideDefinition(document