vscode怎么在控制臺顯示結(jié)果 vscode怎么實現(xiàn)局部選擇?
vscode怎么實現(xiàn)局部選擇?簡單,再次進入vscode,然后點擊“查看”,選擇“調(diào)試控制臺”。2然后點擊“終端”即可可以打開終端面板,直接點擊右上角的“全部拆分編輯器”按鈕。3再點“查找”,選擇“直
vscode怎么實現(xiàn)局部選擇?
簡單,再次進入vscode,然后點擊“查看”,選擇“調(diào)試控制臺”。
2
然后點擊“終端”即可可以打開終端面板,直接點擊右上角的“全部拆分編輯器”按鈕。
3
再點“查找”,選擇“直接切換編輯器組布局”,即可直接切換為垂線布局。
4
立即選擇“直接切換編輯器組布局”,即可切換到為水平布局。
如何更優(yōu)雅地調(diào)試Javascript?
從我的文章拷備過來的,也可以很簡單看下(截圖截圖不過去,很抱歉)
引言
在我們的日常注意開發(fā)中我們動不動愛會遇見JavaScript的調(diào)試問題,而我們解決問題的悠久的傳統(tǒng)解決方案是使用大量的console.log或者console對象的其他方法,這會給我們給予很多不便,特別是遇到了奇怪問題的時候,可能會會又出現(xiàn)大量的console.log,當排查出問題之后我們又不得不在回頭清理掉這些調(diào)試信息,這樣的話有所減少了我們的工作效率。所以,我們有必要尋找好的方案來可以解決JavaScript的調(diào)試問題,那絕對是,Chrome的調(diào)試工具ChromeDevTools給我們給予了軟件調(diào)試的循環(huán)遍歷,下面我們一步步來自學(xué)一遍在DevTools中現(xiàn)場調(diào)試的都差不多工作流程!
不過在此之前:應(yīng)明確我們必須軟件調(diào)試的位置
我們實際一節(jié)簡單的案例來模擬看看,本案例來源于官網(wǎng)的調(diào)試Demo,其中代碼萬分感謝
接著是index.js
代碼的本意是能做一個簡單加法,不過我們不運行看下結(jié)果:
很顯然想執(zhí)行結(jié)果是錯誤的,結(jié)果應(yīng)該是是33,我們舉例這那就是我們在開發(fā)中遇到的問題
第二步:先打開Chrome的調(diào)試面板
CommandOptionI(Mac)或ControlShiftI(Windows、Linux)或是F12
再點擊Source標簽,Source有三塊面板
從左左面是
FileNavigator窗格。此處列出來頁面請求的每個文件。
CodeEditor窗棱。在File Navigator窗格中選擇類型文件后,此處會不顯示該文件的內(nèi)容。
JavaScriptDebugging窗格。檢查頁面JavaScript的各種工具。如果沒有DevTools窗口布局較寬,此窗格會總是顯示在CodeEditor窗格右側(cè)。
在用斷點暫停代碼
常見我們會在這寫console.log,打完斷點我們在添寫兩個數(shù)字遞交
我們的代碼在斷點處停一下了,很形象直觀的能注意到我們是需要看的變量值,簡而言之應(yīng)該是斷點這個可以飛快方便些的查找值,有時候我想循環(huán)展開調(diào)試代碼,真接F10就行了,想直接進入到函數(shù)中按F11,我們調(diào)試到這和我們猜想的完全不一樣,因此是字符串這樣的話號就并不代表直接連接,也就照成了錯誤的結(jié)果。
不使用控制臺就求值
我以為這是最值得去愛贊一波的功能,只不過我們也可以然后在控制臺再輸入變量或是表達式也可以不能執(zhí)行一個函數(shù),我們可以打開console標簽,輸入輸入200以內(nèi)內(nèi)容,前提是我們在之前那個地方打了斷點
我們也可以先執(zhí)行我們要負責(zé)執(zhí)行的函數(shù)和表達式,然后也真確的看見了可是,知道的人很有可能都覺得其實沒什么,不過不知道的人可能感覺這個功能相當good,或是你這個可以真接直接修改代碼能保存后在不能執(zhí)行,則是很清楚了最后,而不必再到編輯器可以修改,調(diào)試對的后就復(fù)制過來即可
學(xué)習(xí)總結(jié)
本文那是想是從簡單的案例能介紹來變動下我們比較傳統(tǒng)的js調(diào)試,目的那就是為了提升工作效率,不過也有很多其它調(diào)試javascript,比如說WebStorm,VSCode直接安裝DebugforChrome,僅僅我都覺得這種好,而也比較簡單,雖說是小技巧,但是也得明白了不是什么,如果能對大家也能所幫助!