<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          牛逼!實(shí)時(shí)可視化 Debug:VS Code 開源新工具,一鍵解析代碼結(jié)構(gòu)

          共 1717字,需瀏覽 4分鐘

           ·

          2020-11-26 17:51


          來自機(jī)器之心

          有沒有一種更優(yōu)雅的 DeBug 方式,以更簡(jiǎn)潔的信息快速幫我們找到代碼的問題所在?

          有的,它就是 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è)試,其它語(yǔ)言也還都能用。

          正確的使用姿勢(shì)

          安裝此擴(kuò)展程序后,使用命令 打開新的可視化視圖。在此視圖里,設(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ǔ)言,因?yàn)橐呀?jīng)集成了數(shù)據(jù)抽取器,因此可以直接自動(dòng)可視化。而其它沒有數(shù)據(jù)抽取器的語(yǔ)言,就需要自定義數(shù)據(jù)結(jié)構(gòu)與可視化器之間的關(guān)系了

          多種可視化器皆可定制

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

          AST 可視化

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

          Python 怎么解?

          我們讀者最常用的就是 Python 語(yǔ)言,然而遺憾的是,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)語(yǔ)句中設(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ì)更有意思?,F(xiàn)在不論是項(xiàng)目維護(hù)者還是其它開發(fā)者,都在關(guān)注這個(gè)問題,期待過一段時(shí)間它能完美支持 Python。

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

          關(guān)注戀習(xí)Python,Python都好練
          好文章,我在看??
          瀏覽 50
          點(diǎn)贊
          評(píng)論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          評(píng)論
          圖片
          表情
          推薦
          點(diǎn)贊
          評(píng)論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  激情小说综合网 | 天天干天天爱天天爽 | 亚洲成人精品视频 | 成人久久视频 | 一个色亚洲 |