2016 - 2024

感恩一路有你

vscode怎么在控制台显示结果 vscode怎么实现局部选择?

浏览量:4656 时间:2023-09-09 16:58:45 作者:采采

vscode怎么实现局部选择?

简单,再次进入vscode,然后点击“查看”,选择“调试控制台”。

2

然后点击“终端”即可可以打开终端面板,直接点击右上角的“全部拆分编辑器”按钮。

3

再点“查找”,选择“直接切换编辑器组布局”,即可直接切换为垂线布局。

4

立即选择“直接切换编辑器组布局”,即可切换到为水平布局。

如何更优雅地调试Javascript?

从我的文章拷备过来的,也可以很简单看下(截图截图不过去,很抱歉)

引言

在我们的日常注意开发中我们动不动爱会遇见JavaScript的调试问题,而我们解决问题的悠久的传统解决方案是使用大量的console.log或者console对象的其他方法,这会给我们给予很多不便,特别是遇到了奇怪问题的时候,可能会会又出现大量的console.log,当排查出问题之后我们又不得不在回头清理掉这些调试信息,这样的话有所减少了我们的工作效率。所以,我们有必要寻找好的方案来可以解决JavaScript的调试问题,那绝对是,Chrome的调试工具ChromeDevTools给我们给予了软件调试的循环遍历,下面我们一步步来自学一遍在DevTools中现场调试的都差不多工作流程!

不过在此之前:应明确我们必须软件调试的位置

我们实际一节简单的案例来模拟看看,本案例来源于官网的调试Demo,其中代码万分感谢

接着是index.js

代码的本意是能做一个简单加法,不过我们不运行看下结果:

很显然想执行结果是错误的,结果应该是是33,我们举例这那就是我们在开发中遇到的问题

第二步:先打开Chrome的调试面板

CommandOptionI(Mac)或ControlShiftI(Windows、Linux)或是F12

再点击Source标签,Source有三块面板

从左左面是

FileNavigator窗格。此处列出来页面请求的每个文件。

CodeEditor窗棱。在File Navigator窗格中选择类型文件后,此处会不显示该文件的内容。

JavaScriptDebugging窗格。检查页面JavaScript的各种工具。如果没有DevTools窗口布局较宽,此窗格会总是显示在CodeEditor窗格右侧。

在用断点暂停代码

常见我们会在这写console.log,打完断点我们在添写两个数字递交

我们的代码在断点处停一下了,很形象直观的能注意到我们是需要看的变量值,简而言之应该是断点这个可以飞快方便些的查找值,有时候我想循环展开调试代码,真接F10就行了,想直接进入到函数中按F11,我们调试到这和我们猜想的完全不一样,因此是字符串这样的话号就并不代表直接连接,也就照成了错误的结果。

不使用控制台就求值

我以为这是最值得去爱赞一波的功能,只不过我们也可以然后在控制台再输入变量或是表达式也可以不能执行一个函数,我们可以打开console标签,输入输入200以内内容,前提是我们在之前那个地方打了断点

我们也可以先执行我们要负责执行的函数和表达式,然后也真确的看见了可是,知道的人很有可能都觉得其实没什么,不过不知道的人可能感觉这个功能相当good,或是你这个可以真接直接修改代码能保存后在不能执行,则是很清楚了最后,而不必再到编辑器可以修改,调试对的后就复制过来即可

学习总结

本文那是想是从简单的案例能介绍来变动下我们比较传统的js调试,目的那就是为了提升工作效率,不过也有很多其它调试javascript,比如说WebStorm,VSCode直接安装DebugforChrome,仅仅我都觉得这种好,而也比较简单,虽说是小技巧,但是也得明白了不是什么,如果能对大家也能所帮助!

版权声明:本文内容由互联网用户自发贡献,本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。