編程語言編譯器開發(fā)工具【免費(fèi)下載鏈接】boaBoa is an embeddable Javascript engine written in Rust.項目地址https://gitcode.com/gh_mirrors/bo/boa點(diǎn)擊查看免費(fèi)下載Boa 是一個用 Rust 編寫的可嵌入式 JavaScript 引擎當(dāng)前倉庫為gh_mirrors/bo/boa本文圍繞倉庫文檔 docs/debugging.md 的核心脈絡(luò)系統(tǒng)講解如何對 Boa 進(jìn)行端到端調(diào)試從詞法/語法階段的 AST 轉(zhuǎn)儲到字節(jié)碼生成與逐指令追蹤再到可視化指令流圖與 JavaScript 側(cè)的$boa調(diào)試對象最后覆蓋編譯器 panic 回溯與 LLDB/VS Code 斷點(diǎn)調(diào)試。讀完本文你將掌握一套完整的 Boa 內(nèi)部觀測工具箱既能排查引擎自身的 bug也能深入理解源碼到字節(jié)碼再到 VM 執(zhí)行的全鏈路行為?？焖偕鲜秩N運(yùn)行 JavaScript 的方式調(diào)試 Boa 的第一步是先讓它運(yùn)行你的 JavaScript。在倉庫根目錄docs/debugging.md所在項目的根目錄下有以下三種基本用法方式一運(yùn)行單個腳本文件cargo run -- test.js在倉庫根目錄創(chuàng)建一個test.js文件然后通過cargo run -- test.js讓 Boa 執(zhí)行它。方式二一次運(yùn)行多個腳本文件cargo run -- file1.js file2.jsCLI 會按參數(shù)順序逐個編譯并執(zhí)行這些文件evaluate_files循環(huán)遍歷所有傳入文件見 cli/src/main.rs。方式三交互式 REPLcargo run不傳任何參數(shù)時Boa 會啟動一個交互式 shell你可以逐行輸入 JavaScript 表達(dá)式并立即查看結(jié)果。REPL 內(nèi)置了若干點(diǎn)命令由 cli/src/main.rs 的 readline 循環(huán)實現(xiàn).help顯示幫助信息.exit退出 REPL或按CtrlD.clear清屏.load file加載并求值一個 JavaScript 文件按CtrlC可中止當(dāng)前表達(dá)式的求值。REPL 的命令歷史會保存在倉庫根目錄下的.boa_history文件中下次啟動自動恢復(fù)。此外 CLI 還支持--strict嚴(yán)格模式、-e expr執(zhí)行表達(dá)式后退出、-q靜默啟動、不打印歡迎橫幅、-m把輸入文件當(dāng)作模塊處理等開關(guān)可配合調(diào)試使用完整參數(shù)定義見 cli/src/main.rs。理解調(diào)試切入點(diǎn)源碼的編譯與執(zhí)行管線Boa 的調(diào)試手段是按代碼被讀取的順序?qū)訉舆f進(jìn)的先了解整體管線有助于定位問題所在。根據(jù) docs/vm.md 的架構(gòu)說明Boa 執(zhí)行 JavaScript 的管線為Source Code → Parser → AST → ByteCompiler → CodeBlock → VM → ResultParser解析器把源碼切成 token再解析為抽象語法樹AST語法錯誤在這一階段拋出ByteCompiler字節(jié)碼編譯器把 AST 編譯成字節(jié)碼存進(jìn)CodeBlockCodeBlock每個函數(shù)或腳本/模塊編譯后的形態(tài)包含指令字節(jié)、常量池、綁定信息、異常處理器與元數(shù)據(jù)VM虛擬機(jī)逐條執(zhí)行字節(jié)碼并產(chǎn)出結(jié)果。下面依次介紹對應(yīng)各階段的可觀測工具。第一階段轉(zhuǎn)儲 Tokens 與 AST--dump-astBoa 做的第一件事是從源代碼生成 token再把 token 解析為 AST。任何語法錯誤都會在 AST 生成階段被拋出。要查看 AST使用 CLI 標(biāo)志--dump-ast短選項-a見 cli/src/main.rs它支持三種輸出格式格式說明Debug默認(rèn)格式即 Ruststd::fmt::Debug的美化輸出Json壓縮的單行 JSONJsonPretty格式化縮進(jìn)的 JSON轉(zhuǎn)儲文件的 ASTcargo run -- test.js --dump-ast # AST dump 格式默認(rèn)為 Debug在交互式 REPL 中同樣可用cargo run -- --dump-ast # AST dump 格式默認(rèn)為 Debug從實現(xiàn)上看dump()函數(shù)會創(chuàng)建一個boa_parser::Parser分別調(diào)用parse_script/parse_module完成解析再按DumpFormat枚舉Debug/Json/JsonPretty序列化輸出解析和 AST 生成耗時會在--time標(biāo)志開啟時被單獨(dú)統(tǒng)計見 cli/src/main.rs。另外 AST 轉(zhuǎn)儲與--flowgraph互斥conflicts_with graph兩者不能同時使用。第二階段字節(jié)碼生成與執(zhí)行追蹤--traceAST 生成后Boa 會把它編譯成字節(jié)碼再由 VM 執(zhí)行。CLI 標(biāo)志--trace可以同時打印編譯產(chǎn)出的字節(jié)碼和實際執(zhí)行的每一條指令這是觀察引擎內(nèi)部行為最直接的手段。例如對下面的腳本let a 1; let b 2;運(yùn)行cargo run -- test.js --trace會得到類似如下的輸出示例取自 docs/vm.md 的Understanding the trace output一節(jié)----------------------Compiled Output: main----------------------- Location Count Handler Opcode Operands 000000 0000 none PushOne 000001 0001 none PutLexicalValue 0000: a 000006 0002 none PushInt8 2 000008 0003 none PutLexicalValue 0001: b 000013 0004 none Return Literals: empty Bindings: 0000: a 0001: b Functions: empty Handlers: empty ----------------------------------------- Call Frame ----------------------------------------- Time Opcode Operands Top Of Stack 6μs PushOne 1 7μs PutLexicalValue 0000: a empty 0μs PushInt8 2 2 1μs PutLexicalValue 0001: b empty 0μs Return empty Stack: empty undefined這段輸出分四部分含義如下依據(jù) docs/vm.mdCompiled Output編譯產(chǎn)物將被執(zhí)行的函數(shù)的字節(jié)碼與屬性。Location指令所在位置注意指令不是等長的Count指令計數(shù)Handler異常處理器若該指令拋異常由哪個 handler 負(fù)責(zé)以及跳往何處表示 handler 起點(diǎn)表示終點(diǎn)Opcode操作碼名稱Operands操作碼的操作數(shù)Literals字節(jié)碼使用的字面量如字符串Bindings字節(jié)碼使用的綁定名Functions字節(jié)碼引用的函數(shù)名Handlers字節(jié)碼使用的異常處理器記錄相對CallFrame幀指針需要保留的棧值和環(huán)境數(shù)量。Call Frame調(diào)用幀實際執(zhí)行過程中的每條指令。Time該指令執(zhí)行耗時Opcode操作碼名稱Operands操作數(shù)Top Of Stack指令執(zhí)行后棧頂元素。Stack執(zhí)行結(jié)束后的棧內(nèi)容追蹤。執(zhí)行結(jié)果棧頂元素棧為空則返回undefined。關(guān)于 VM 與 trace 輸出的更多細(xì)節(jié)請閱讀 docs/vm.md。需要說明的是逐指令追蹤在tracecargo feature 開啟時生效引擎內(nèi)部通過vm.trace全局與code_block.set_traceable(true)單函數(shù)兩個開關(guān)控制--trace標(biāo)志對應(yīng)在 cli/src/main.rs 的context.set_trace(args.trace)調(diào)用。第三階段指令流圖--flowgraph除了逐行文本追蹤你還可以獲得 VM 指令的流圖flowgraph——它是指令流的一種可視化表示對理解控制流跳轉(zhuǎn)、分支、循環(huán)尤其直觀。圖形語義圖中的Start綠色與End紅色節(jié)點(diǎn)分別代表執(zhí)行的起點(diǎn)與終點(diǎn)它們不是指令只是標(biāo)記條件指令呈菱形YES分支為綠色NO分支為紅色push/pop 環(huán)境配對使用相同顏色并用虛線連接。使用方式--flowgraph默認(rèn)輸出 graphviz 格式描述語言需由dot工具渲染成圖片也可以加--flowgraphmermaid輸出 Mermaid 格式。渲染命令示例cargo run -- test.js --flowgraph | dot -Tpng test.png把-Tpng換成-Tsvg即可生成 SVG 文件cargo run -- test.js --flowgraph | dot -Tsvg test.svgdot來自graphviz軟件包絕大多數(shù) Linux 發(fā)行版默認(rèn)已安裝如果你不想安裝也可以使用支持 Graphviz 的在線編輯器來查看圖內(nèi)容。下面這張圖是倉庫自帶的一個流圖渲染示例graphviz_flowgraph.svg位于 docs/img/Mermaid 格式的圖可以被 GitHub 原生渲染無需第三方程序只需把圖內(nèi)容放進(jìn)一個mermaid代碼塊控制流向方向通過--flowgraph-direction可以指定圖的流向?qū)?yīng) CLI 中的FlowgraphDirection枚舉見 cli/src/main.rs選項含義top-to-bottom從上到下默認(rèn)bottom-to-top從下到上left-to-right從左到右right-to-left從右到左例如cargo run -- test.js --flowgraph --flowgraph-directionleft-to-right該方向參數(shù)最終會映射到 VM 流圖模塊的Direction枚舉TopToBottom/BottomToTop/LeftToRight/RightToLeft見 cli/src/main.rs 中的generate_flowgraph實現(xiàn)。通過$boa調(diào)試對象在 JavaScript 中調(diào)試 JavaScript有些調(diào)試動作在 JavaScript 層面很難甚至不可能完成——比如強(qiáng)制觸發(fā)一次 GC 回收。為此 Boa 提供了$boa全局調(diào)試對象它包含一系列實用工具讓你可以在 JavaScript 中調(diào)試 JavaScript。啟用方式是在 CLI 加上--debug-object標(biāo)志見 cli/src/main.rs該標(biāo)志會調(diào)用init_boa_debug_object把$boa以全局變量的形式注入當(dāng)前上下文對象按模塊劃分gc、function、object、shape、optimizer、realm、limits、string各模塊的注冊代碼見 cli/src/debug/mod.rs。例如強(qiáng)制觸發(fā)一次 GC$boa.gc.collect()如果只想追蹤某一個特定函數(shù)而不用--trace那樣追蹤所有指令、被輸出淹沒可以用$boa.function.trace(func, this, ...args)。$boa對象的全部模塊與功能完整文檔見 docs/boa_object.md下面按模塊逐一展開。模塊$boa.gc與垃圾回收器相關(guān)的函數(shù)目前只有.collect()$boa.gc.collect()該方法強(qiáng)制觸發(fā) GC 掃描堆并回收垃圾實現(xiàn)上直接調(diào)用boa_gc::force_collect()見 cli/src/debug/gc.rs。模塊$boa.function與函數(shù)執(zhí)行和調(diào)試相關(guān)的工具函數(shù)實現(xiàn)見 cli/src/debug/function.rs。$boa.function.bytecode(func)返回某個函數(shù)編譯后的字節(jié)碼字符串。例如在 REPL 中 function add(x, y) { return x y } $boa.function.bytecode(add) ------------------------Compiled Output: add------------------------ Location Count Handler Opcode Operands 000000 0000 none CreateMappedArgumentsObject 000001 0001 none PutLexicalValue 2: 0 000004 0002 none GetArgument 0 000006 0003 none PutLexicalValue 2: 1 000009 0004 none GetArgument 1 000011 0005 none PutLexicalValue 2: 2 000014 0006 none PushDeclarativeEnvironment 2 000016 0007 none GetName 0000: x 000018 0008 none GetName 0001: y 000020 0009 none Add 000021 0010 none SetAccumulatorFromStack 000022 0011 none CheckReturn 000023 0012 none Return 000024 0013 none CheckReturn 000025 0014 none Return Constants: 0000: [ENVIRONMENT] index: 1, bindings: 1 0001: [ENVIRONMENT] index: 2, bindings: 3 0002: [ENVIRONMENT] index: 3, bindings: 0 Bindings: 0000: x 0001: y Handlers: empty $boa.function.trace(func, this, ...args)只追蹤指定的函數(shù)如果該函數(shù)調(diào)用了其他函數(shù)被調(diào)用者的指令不會被追蹤。this值以及傳入的參數(shù)都可以自由指定 const add (a, b) a b $boa.function.trace(add, undefined, 1, 2) 5μs DefInitArg 0000: a 2 4μs DefInitArg 0001: b empty 0μs RestParameterPop empty 3μs GetName 0000: a 1 1μs GetName 0001: b 2 2μs Add 3 1μs Return 3 3 從實現(xiàn)看trace會先給目標(biāo)函數(shù)的CodeBlock設(shè)置 traceable 標(biāo)志調(diào)用完成后再清除見 cli/src/debug/function.rs。$boa.function.traceable(func, mode)把某個函數(shù)標(biāo)記為可追蹤使其在以后所有執(zhí)行中都被追蹤。它既適合一次標(biāo)記多個函數(shù)也適合追蹤會掛起執(zhí)行的函數(shù)async 函數(shù)、生成器、async 生成器。例如function* g() { yield 1; yield 2; yield 3; } $boa.function.traceable(g, true); var iter g(); iter.next(); iter.next(); iter.next();輸出注意生成器掛起/恢復(fù)時的指令序列1μs RestParameterPop empty 1μs PushUndefined undefined 2μs Yield undefined 4μs GetName 0000: a 1 0μs Yield 1 1μs GeneratorNext undefined 1μs Pop empty 15μs GetName 0001: b 2 1μs Yield 2 1μs GeneratorNext undefined 1μs Pop empty 4μs GetName 0002: c 3 1μs Yield 3$boa.function.flowgraph(func, options)在函數(shù)級別獲取指令流圖效果等同命令行--flowgraph但不需要退出 Boa shell 再加參數(shù)。第二個參數(shù)可以是字符串表示流圖格式也可以是對象見 cli/src/debug/function.rs 的參數(shù)解析邏輯// 如果不指定以下為默認(rèn)值 { format: mermaid direction: LeftRight // 或 LR 簡寫 }示例$boa.function.flowgraph(func, graphviz) $boa.function.flowgraph(func, { format: mermaid, direction: TopBottom })方向取值支持LeftRight/LR、RightLeft/RL、TopBottom/TB、BottomTop/BT及其小寫形式。模塊$boa.object提供獲取對象內(nèi)部信息的工具實現(xiàn)見 cli/src/debug/object.rs。$boa.object.id(object)返回給定對象在內(nèi)存中的地址十六進(jìn)制字符串let o { x: 10, y: 20 } $boa.object.id(o) // 0x7F5B3251B718 // 獲取 $boa 對象自身在內(nèi)存中的地址 $boa.object.id($boa) // 0x7F5B3251B5D8實現(xiàn)上取object.as_ref()的裸指針并格式化為0x{:X}見 cli/src/debug/object.rs。$boa.object.indexedStorageType(object)返回對象的索引存儲類型可用于觀察數(shù)組等對象在元素增刪、打洞、改變屬性描述符時內(nèi)部存儲形態(tài)的遷移let a [1, 2]; $boa.object.indexedStorageType(a); // DenseI32 a.push(0xdeadbeef); $boa.object.indexedStorageType(a); // DenseI32 a.push(0.5); $boa.object.indexedStorageType(a); // DenseF64 a.push(Hello); $boa.object.indexedStorageType(a); // DenseElement a[100] 100; // Make a hole $boa.object.indexedStorageType(a); // SparseElement // Non-simple property descriptor (e.g., non-writable) Object.defineProperty(a, 2, { value: 10, writable: false }); $boa.object.indexedStorageType(a); // SparseProperty返回值與引擎內(nèi)部IndexProperties枚舉一一對應(yīng)DenseI32、DenseF64、DenseElement、SparseElement、SparseProperty見 cli/src/debug/object.rs。模塊$boa.optimizer包含啟用/禁用優(yōu)化的 getter 與 setter。$boa.optimizer.constantFolding訪問器屬性getter 返回true已啟用或falsesetter 用于啟用/禁用常量折疊優(yōu)化$boa.optimizer.constantFolding true $boa.optimizer.constantFolding // true$boa.optimizer.statistics訪問器屬性getter 返回優(yōu)化統(tǒng)計是否開啟setter 控制是否把優(yōu)化統(tǒng)計打印到stdout $boa.optimizer.constantFolding true $boa.optimizer.statistics true 1 1 Optimizer { constant folding: 1 run(s), 2 pass(es) (1 mutating, 1 checking) } 2 模塊$boa.realm包含用于測試跨 realm 行為的工具。$boa.realm.create創(chuàng)建一個帶全新內(nèi)建對象的新 realm并返回其全局對象let global $boa.realm.create(); Object ! global.Object; // true模塊$boa.shape提供查詢對象 shape隱藏類信息的函數(shù)。$boa.shape.id(object)返回對象 shape 在內(nèi)存中的指針十六進(jìn)制字符串$boa.shape.id(Number) // 0x7FC35A073868 $boa.shape.id({}) // 0x7FC35A046258$boa.shape.type(object)返回對象的 shape 類型$boa.shape.type({x: 3}) // shared $boa.shape.type(Number) // unique$boa.shape.same(o1, o2)若兩個對象擁有相同 shape 則返回true注意屬性值不影響比較// 屬性的值不重要 let o1 { x: 10 } let o2 {} $boa.shape.same(o1, o2) // false o2.x 20 $boa.shape.same(o1, o2) // true o2.y 200 $boa.shape.same(o1, o2) // falseshape 機(jī)制是 Boa 對象模型性能優(yōu)化的核心想深入了解可閱讀 docs/shapes.md。模塊$boa.limits提供修改運(yùn)行時限制的工具實現(xiàn)見 cli/src/debug/limits.rs底層對應(yīng)RuntimeLimits默認(rèn)值為遞歸 512 層、棧大小 1024、循環(huán)次數(shù)幾乎不限見 docs/vm.md 的 Runtime Limits 一節(jié)。$boa.limits.loopgetter 返回拋出錯誤前的循環(huán)迭代上限setter 設(shè)置循環(huán)迭代上限$boa.limits.loop 10; while (true) {} // RuntimeLimit: Maximum loop iteration limit 10 exceeded$boa.limits.stackgetter 返回拋出錯誤前的值棧大小上限setter 設(shè)置該上限$boa.limits.stack 10; function x() { return; } x(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); // RuntimeLimit: exceeded maximum call stack length$boa.limits.recursiongetter 返回拋出錯誤前的遞歸深度上限setter 設(shè)置遞歸上限$boa.limits.recursion 100; function x() { return x(); } x(); // RuntimeLimit: Maximum recursion limit 100 exceeded$boa.limits.backtracegetter 返回拋出錯誤時的回溯backtrace上限setter 設(shè)置該上限$boa.limits.backtrace 100; function x() { function y() { function z() { throw Hello; } z(); } y(); } x(); // Uncaught Hello // at z (test.js:6:13) // at y (test.js:8:6) // at x (test.js:10:4) // at main (test.js:12:2)模塊$boa.string提供查詢字符串內(nèi)部存儲信息的函數(shù)。$boa.string.storage(str)返回字符串的內(nèi)部存儲類型如果是 Boa 中已知的、存放在STATIC_STRINGS數(shù)組中的字符串則返回static否則返回heap$boa.string.storage(push) // static $boa.string.storage(specialFunction) // heap$boa.string.encoding(str)返回字符串的內(nèi)部編碼$boa.string.encoding(Greeting) // latin1 $boa.string.encoding(挨拶) // utf16$boa.string.summary(str)返回包含字符串簡短摘要的對象$boa.string.summary(Greeting) // { storage: heap, encoding: latin1 }編譯器 panic獲取完整回溯如果 Boa 編譯器本身發(fā)生了 panic而不是 JavaScript 運(yùn)行時錯誤默認(rèn)只會打印 panic 位置。要拿到完整的調(diào)用?；厮菪枰O(shè)置環(huán)境變量RUST_BACKTRACE1在設(shè)置該變量后重新運(yùn)行觸發(fā) panic 的命令Rust 會打印完整的回溯棧幫助定位 panic 發(fā)生在哪個編譯/執(zhí)行階段。使用調(diào)試器下斷點(diǎn)當(dāng)文本級觀測工具不夠用時可以直接在 Rust 側(cè)下斷點(diǎn)。VS Code Debugger推薦最快的入門方式是使用 VS Code 的CodeLLDB 插件vadimcn.vscode-lldb安裝后在 Rust 源碼例如 cli/src/main.rs 或 core/engine/src/vm/mod.rs的任意行打上斷點(diǎn)用調(diào)試配置啟動boa即可單步觀察解析、編譯與 VM 執(zhí)行過程。LLDB 手動調(diào)試也可以使用rust-lldb直接啟動編譯產(chǎn)物。先構(gòu)建 debug 版二進(jìn)制cargo build會生成target/debug/boa然后rust-lldb ./target/debug/boa [arguments]例如rust-lldb ./target/debug/boa test.js --trace在rust-lldb會話中可以對任意 Rust 源碼行設(shè)置斷點(diǎn)breakpoint set --file xxx.rs --line N、單步執(zhí)行next/step、打印變量frame variable等從而在 Rust 層面觀察引擎內(nèi)部狀態(tài)。小結(jié)按調(diào)試需求選擇工具想觀察什么使用什么工具關(guān)鍵參數(shù)/入口語法階段產(chǎn)物AST 轉(zhuǎn)儲--dump-astDebug/Json/JsonPretty編譯與執(zhí)行階段字節(jié)碼 逐指令追蹤--trace控制流可視化指令流圖--flowgraph/--flowgraphmermaid、--flowgraph-directionJS 內(nèi)觸發(fā) GC、追蹤單函數(shù)、改限制等$boa調(diào)試對象--debug-object完整 API 見 docs/boa_object.md編譯器 panic 定位Rust 回溯RUST_BACKTRACE1斷點(diǎn)級調(diào)試CodeLLDB 插件 /rust-lldbrust-lldb ./target/debug/boa [arguments]以上所有調(diào)試手段都建立在 docs/debugging.md 描述的核心工作流之上先用cargo run跑起腳本或 REPL再沿著AST → 字節(jié)碼 → 執(zhí)行 → 流圖 → JS 側(cè)調(diào)試對象 → 斷點(diǎn)的鏈路逐層深入。無論你是想修 Boa 本身的 bug、驗證新特性還是單純想理解一個 Rust 實現(xiàn)的 JS 引擎內(nèi)部如何運(yùn)轉(zhuǎn)這套工具箱都值得常備。贊分享編程語言編譯器開發(fā)工具【免費(fèi)下載鏈接】boaBoa is an embeddable Javascript engine written in Rust.項目地址https://gitcode.com/gh_mirrors/bo/boa點(diǎn)擊查看免費(fèi)下載相關(guān)推薦如何快速上手SharpShooter5分鐘創(chuàng)建你的第一個惡意Payload如何快速上手SharpShooter5分鐘創(chuàng)建你的第一個惡意Payload SharpShooter 是一個功能強(qiáng)大的Payload生成框架專門用于創(chuàng)建和執(zhí)Boa 引擎的 $boa 調(diào)試對象在 JavaScript 中直接調(diào)試字節(jié)碼、Shape 與運(yùn)行時限制的完整指南Boa 引擎的 $boa 調(diào)試對象在 JavaScript 中直接調(diào)試字節(jié)碼、Shape 與運(yùn)行時限制的完整指南 $boa 是 Boa JavaScript編程語言編譯器開發(fā)工具Boa 字節(jié)碼快照測試指南用 insta 追蹤 JavaScript 引擎編譯輸出Boa 字節(jié)碼快照測試指南用 insta 追蹤 JavaScript 引擎編譯輸出 導(dǎo)讀 本文介紹 Boa用 Rust 編寫的可嵌入 JavaScript編程語言編譯器開發(fā)工具上一篇use-gesture國際化支持多語言錯誤提示下一篇Resque安全加固權(quán)限控制與敏感數(shù)據(jù)處理創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考