色婷婷亚洲一,亚洲av无码精品在线观看,一级a片黄色成人小视频,黑人插逼视频,国产被操,亚洲精品粉嫩小泬18p,国产乱婬AV公,无码一级日韩免费

點(diǎn)擊“開發(fā)者技術(shù)前線”，選擇“星標(biāo)?”
讓一部分開發(fā)者看到未來

機(jī)器之心報(bào)道

參與：思、jamin

DeBug 太枯燥？讓 VS Code 畫個(gè)圖，自動(dòng)幫你理清數(shù)據(jù)結(jié)構(gòu)與代碼思路，這就是 Reddit 2K 多點(diǎn)贊的開源新工具。

項(xiàng)目地址：https://github.com/hediet/vscode-debug-visualizer

寫代碼，難免會(huì)遇到各種神奇的問題，代碼短我們?cè)谀X海中「運(yùn)行」一遍也就差不多能找出原因。但代碼要是比較長，錯(cuò)誤就會(huì)隱藏比較深了，這個(gè)時(shí)候，不論你是采用 print() 大法，還是善用 assert 語句，或者干脆設(shè)置斷點(diǎn)，DeBug 總是一條慢慢排除的道路。

之前機(jī)器之心曾介紹過極簡 DeBug 工具?PySnooper?，我們只需要向感興趣的函數(shù)增加一個(gè)裝飾器，就能得到該函數(shù)的詳細(xì) log，包含哪行代碼能運(yùn)行、什么時(shí)候運(yùn)行以及本地變量變化的確切時(shí)間等等。這個(gè) GitHub 12.3K Star 量的 DeBug 工具，輸出風(fēng)格是這樣色的：

左邊是運(yùn)行信息，右邊是對(duì)應(yīng) NumPy 代碼。

這種復(fù)雜的 DeBug 工具，看起來就比較勸退。此外，在 PyCharm 上使用斷點(diǎn)調(diào)試，它輸出的也是各種變量的定義與值，同樣是一堆詳細(xì)信息。

那么能不能有一種更優(yōu)雅的 DeBug 方式，以更簡潔的信息快速幫我們找到代碼的問題所在？這就是 VS Code 最新推出的可視化 DeBug，它能以圖的方式快速展示數(shù)據(jù)結(jié)構(gòu)。

我們先看看效果，如下動(dòng)圖將斷點(diǎn)設(shè)置為第 32 行定義雙向鏈表，隨后一行行運(yùn)行代碼就會(huì)在右圖展現(xiàn)出對(duì)應(yīng)的數(shù)據(jù)結(jié)構(gòu)圖。

這種可視化非常優(yōu)雅，而且該工具也會(huì)根據(jù)數(shù)據(jù)結(jié)構(gòu)以不同的方式展現(xiàn)，例如樹形、表格、曲線和圖等。如下動(dòng)圖展示幾種不同的可視化方式：

效果上確實(shí)非常驚艷，它與之前的 DeBug 方式采用完全不同的展現(xiàn)形式。目前該 VS Code Debug Visualizer 在 JavaScript/TypeScript 上有比較好的效果，在 C#、Java 和 PHP 上也正在積極測(cè)試，其它語言也還都能用。

正確的使用姿勢(shì)

安裝此擴(kuò)展程序后，使用命令< Open a new Debug Visualizer View >打開新的可視化視圖。在此視圖里，設(shè)置斷點(diǎn)逐步執(zhí)行后，表達(dá)式的執(zhí)行與動(dòng)態(tài)可視化都會(huì)展示在里面。右上角的刷新鍵可將當(dāng)前的可視化工具視圖彈出到新的瀏覽器窗口，同時(shí)還可以通過展開詳細(xì)信息的窗口去選擇數(shù)據(jù)提取器以及可視化調(diào)試器。

可視化調(diào)試器使用的是特定的 JSON 數(shù)據(jù)，相關(guān)支持的 JSON 數(shù)據(jù)模式可參考原 GitHub 項(xiàng)目。

當(dāng)前的可視化表達(dá)式應(yīng)該是作為 JSON 對(duì)象字符串來進(jìn)行運(yùn)算的，并與所支持的可視化調(diào)節(jié)器相匹配。而這個(gè) JSON 字符串可能被單引號(hào)或者雙引號(hào)所包含（也有可能沒有引號(hào)），因此不能忽略轉(zhuǎn)義符。

舉一個(gè)案例：

"{ "kind": { "text": true }, "text": "some text\nmore text" }".

對(duì)于 TypeScript/JavaScript 等語言，因?yàn)橐呀?jīng)集成了數(shù)據(jù)抽取器，因此可以直接自動(dòng)可視化。而其它沒有數(shù)據(jù)抽取器的語言，就需要自定義數(shù)據(jù)結(jié)構(gòu)與可視化器之間的關(guān)系了

多種可視化器皆可定制

該擴(kuò)展還內(nèi)置了其他可自定義的可視化調(diào)節(jié)器，尤其在 debug 時(shí)使用起來非常直觀，可以根據(jù)面對(duì)不同的處理對(duì)象，可選擇更易于理解的可視化方式。比如圖表可視化，Plotly 可視化，Tree 可視化，網(wǎng)格可視化，文本可視化等等。在其種類非常豐富的同時(shí)，操作性也較為簡便，效果非常直觀，小編選取了幾種類型作為案例：

Plotly 可視化

AST 可視化

在使用 AST 可視化還會(huì)呈現(xiàn)源代碼，在選擇其節(jié)點(diǎn)時(shí)，還會(huì)突出顯示源代碼中的跨度。

Python 怎么解？

我們讀者最常用的就是 Python 語言，然而遺憾的是，Debug Visualizer 并不支持 Python 數(shù)據(jù)結(jié)構(gòu)的自動(dòng)可視化。不過，Python 開發(fā)者還是非常熱情的，他們嘗試手動(dòng)添加自定義可視化功能。

項(xiàng)目維護(hù)者正在討論添加對(duì) Python 的支持。

那么如果要手動(dòng)調(diào)用 Debug Visualizer，開發(fā)者在 Demo 中新提交了一個(gè) Python 示例。我們需要以 JSON 格式來表示數(shù)據(jù)，并完成自定義可視化，注意該 JSON 需要滿足 Debug Visualizer 的格式定義。

如果在循環(huán)語句中設(shè)置斷點(diǎn)，那么就可以導(dǎo)入 json_graph 來可視化結(jié)果，如下所示為 10 個(gè)節(jié)點(diǎn)的可視化展示。

在 Reddit 社區(qū)上，也有很多開發(fā)者在討論 Python 是不是能用，有沒有更便捷的方式自動(dòng)可視化 DeBug，而不是在 DeBug 前還需要手動(dòng)先配置一番。

VS Code Debug Visualizer 確實(shí)非?？幔С?Python 的它會(huì)更有意思。現(xiàn)在不論是項(xiàng)目維護(hù)者還是其它開發(fā)者，都在關(guān)注這個(gè)問題，期待過一段時(shí)間它能完美支持 Python。

參考鏈接：https://www.reddit.com/r/programming/comments/f88zom/i_made_an_extension_for_visual_debugging_in_vs/



END


前線推出學(xué)習(xí)交流一定要備注：研究/工作方向+地點(diǎn)+學(xué)校/公司+昵稱（如AI+上海+上師大+卡卡），根據(jù)格式備注，可更快被通過且邀請(qǐng)進(jìn)群

掃碼助手小姐姐微信，進(jìn)群大廠內(nèi)推&大佬技術(shù)交流


END


開發(fā)者技術(shù)前線 ，匯集技術(shù)前線快訊和關(guān)注行業(yè)趨勢(shì)，大廠干貨，是開發(fā)者經(jīng)歷和成長的優(yōu)秀指南。
ps:后臺(tái)回復(fù)?“面試“&”資料”?數(shù)百面試手冊(cè)，即可領(lǐng)取程序員大禮包等你
歷史推薦

PyCharm vs VSCode 到底誰更牛？
刷題一個(gè)半月，一口氣拿下騰訊、華為、Oppo 、微軟7個(gè)大廠offer，字節(jié)跳動(dòng)薪資漲幅60%！
Docker+VSCode 配置屬于自己的煉丹爐
技術(shù)總監(jiān)：你個(gè)P7 連 CopyOnWriteArrayList 都沒聽過！我：確實(shí)沒聽過
好文點(diǎn)個(gè)在看吧！

VS Code 強(qiáng)大的開源工具！實(shí)時(shí)可視化Debug，一鍵解析代碼結(jié)構(gòu)

讓一部分開發(fā)者看到未來

VS Code 強(qiáng)大的開源工具！實(shí)時(shí)可視化Debug，一鍵解析代碼結(jié)構(gòu)