Ladybird 瀏覽器 VS Code 開發(fā)環(huán)境全指南CMake 預(yù)設(shè)、clangd 索引、一鍵構(gòu)建與 WebContent 斷點(diǎn)調(diào)試【免費(fèi)下載鏈接】ladybirdTruly independent web browser項(xiàng)目地址: https://gitcode.com/GitHub_Trending/la/ladybird給 Ladybird 配置 VS Code 開發(fā)環(huán)境其實(shí)只需走通五步裝好 3 個(gè)擴(kuò)展 → 選對(duì) CMake 預(yù)設(shè) → 讓 clangd 索引準(zhǔn)備好 → 用任務(wù)一鍵構(gòu)建 → 給 WebContent 下斷點(diǎn)。把這五步串起來你就在 VS Code 里拿下了這套 C/CMake 瀏覽器的日常編譯、運(yùn)行與調(diào)試而且每一項(xiàng)配置都能在倉庫里找到對(duì)應(yīng)文件核對(duì)。準(zhǔn)備裝好 3 個(gè)擴(kuò)展、先跑 1 條命令這一章解決打開倉庫前先把底子打好的問題裝對(duì)擴(kuò)展、給 WSL 一個(gè)合適的位置、再觸發(fā)一次依賴構(gòu)建。三個(gè)擴(kuò)展各司其職擴(kuò)展負(fù)責(zé)什么什么時(shí)候需要CMake Tools識(shí)別倉庫根目錄的CMakePresets.json跑配置、構(gòu)建、運(yùn)行每次構(gòu)建前必開clangdC/C 代碼理解補(bǔ)全、跳轉(zhuǎn)、重構(gòu)并內(nèi)置 clang-format想讓代碼被讀懂時(shí)GitLens在文件里疊加 Git 歷史信息想追溯改動(dòng)時(shí)如果你走 WSL 路線用 WSL Remote 擴(kuò)展就能在 Windows 上跑 VS Code WSL 這套工作流。這里注意為了讓索引和跳轉(zhuǎn)更跟手最好把 Ladybird 目錄放在 WSL 的根分區(qū)而不是從 Windows 掛載進(jìn)來的盤符下。接著觸發(fā) vcpkg 依賴的下載與構(gòu)建先跑一次這條命令./Meta/ladybird.py build它背后做的事能在 CMakeBasePresets.json 里查到base預(yù)設(shè)用了 Ninja 生成器把CMAKE_TOOLCHAIN_FILE指向$env{VCPKG_ROOT}/scripts/buildsystems/vcpkg.cmakeVCPKG_ROOT默認(rèn)落在Build/vcpkg還配了LADYBIRD_CACHE_DIR構(gòu)建緩存和VCPKG_BINARY_SOURCES本地二進(jìn)制緩存。這些機(jī)制在第一次構(gòu)建時(shí)全部搭好后面的構(gòu)建與 IDE 索引才有一個(gè)穩(wěn)定的產(chǎn)物目錄可用。底子打好了接下來挑一個(gè)合適的預(yù)設(shè)。Ladybird CMake 預(yù)設(shè)怎么選一次看懂 3 種構(gòu)建產(chǎn)物這一章幫你在打開 CMake Tools 之前就搞清楚該激活哪個(gè)預(yù)設(shè)、產(chǎn)物會(huì)落到哪。CMake Tools 會(huì)自動(dòng)識(shí)別倉庫根目錄的 CMakePresets.json。這個(gè)文件是 version 9要求 CMake 最低 3.30并通過include引入按主機(jī)系統(tǒng)區(qū)分的預(yù)設(shè)Meta/CMake/presets/CMake${hostSystemName}Presets.json。在 Linux 上就是 CMakeLinuxPresets.json它再層層包含 CMakeUnixPresets.json 與 CMakeBasePresets.json。所以你在面板里看到的一堆預(yù)設(shè)其實(shí)是這幾層疊出來的。根文件里的buildPresets和三種常用產(chǎn)物一一對(duì)應(yīng)預(yù)設(shè)產(chǎn)物目錄構(gòu)建類型關(guān)鍵配置什么時(shí)候用ReleaseBuild/releaseRelWithDebInfo默認(rèn)變體日常構(gòu)建、跑索引DebugBuild/debugDebug帶完整調(diào)試符號(hào)給調(diào)試器附加時(shí)SanitizerBuild/sanitizersRelWithDebInfoENABLE_ADDRESS_SANITIZERENABLE_UNDEFINED_SANITIZERASAN/UBSAN想抓內(nèi)存/未定義行為 bug 時(shí)Unix 平臺(tái)含 Linux還多給了Distribution、Fuzzers、All_Debug等配置預(yù)設(shè)都在 CMakeUnixPresets.json 里測試預(yù)設(shè)也按同名變體組織其中 Sanitizer 的testPresets還額外注入了ASAN_OPTIONS/UBSAN_OPTIONS。日常你基本只用得上上表前三行。預(yù)設(shè)選對(duì)了現(xiàn)在讓 clangd 真的讀懂代碼。Ladybird clangd 索引配置讓 clangd 真正讀懂瀏覽器這一章解決補(bǔ)全/跳轉(zhuǎn)不準(zhǔn)的問題根子在于 clangd 缺一份編譯數(shù)據(jù)庫。clangd 靠compile_commands.json理解項(xiàng)目CMake 在配置/構(gòu)建時(shí)會(huì)把它生成到Build/release。你可以把它想成 CMake 遞給 clangd 的一份編譯配方——每個(gè)編譯單元用什么參數(shù)clangd 照著來跳轉(zhuǎn)和補(bǔ)全才準(zhǔn)。為保證這份數(shù)據(jù)庫確實(shí)生成了先跑一次瀏覽器本體./Meta/ladybird.py run ladybird這里注意clangd 在壓較新的編譯器特性時(shí)偶發(fā)崩潰。遇到先做兩件事在命令面板里重啟 clangd還不行就關(guān)掉當(dāng)前打開的 C 文件、或切一下分支再重啟有時(shí)能救回來。如果你堅(jiān)持用 Microsoft C/C 擴(kuò)展它和 clangd / clang-format 擴(kuò)展在同一工作區(qū)會(huì)互相打架倉庫給了下面這份.vscode/c_cpp_properties.json來規(guī)避部分報(bào)錯(cuò)即便配好它仍可能報(bào)找不到類型/方法一類的誤報(bào)。.vscode/c_cpp_properties.json{ configurations: [ { name: ladybird-gcc, includePath: [ ${workspaceFolder}, ${workspaceFolder}/Build/release/, ${workspaceFolder}/Build/release/Libraries, ${workspaceFolder}/Build/release/Services, ${workspaceFolder}/Libraries, ${workspaceFolder}/Services ], defines: [ DEBUG ], cStandard: c17, cppStandard: c23, intelliSenseMode: linux-gcc-x86, compileCommands: Build/release/compile_commands.json, compilerArgs: [ -Wall, -Wextra, -Werror ], browse: { path: [ ${workspaceFolder}, ${workspaceFolder}/Build/release/, ${workspaceFolder}/Build/release/Libraries, ${workspaceFolder}/Build/release/Services, ${workspaceFolder}/Libraries, ${workspaceFolder}/Services ], limitSymbolsToIncludedHeaders: true, databaseFilename: ${workspaceFolder}/Build/release/ } } ], version: 4 }索引通了再用兩個(gè) .vscode 文件把習(xí)慣固化下來。兩個(gè) .vscode 文件Ladybird 工作區(qū)的 settings.json 與 tasks.json這一章把編輯器長什么樣和怎么一鍵構(gòu)建/運(yùn)行都寫進(jìn)兩個(gè)文件省得每次手敲。settings.json編輯器外觀與格式化格式化由 clangd 自帶的 clang-format 引擎負(fù)責(zé)改用 Microsoft 擴(kuò)展時(shí)它也有 clang-format 支持。下面配置里的C_Cpp.clang_format_style: file就是讓 Microsoft 擴(kuò)展改用倉庫自帶的.clang-format只用 clangd 時(shí)這一項(xiàng)可省。{ // 排除生成目錄保持文件樹干凈并加速搜索 files.exclude: { **/.git: true, Build/**: true, }, search.exclude: { **/.git: true, Build/**: true, }, // 強(qiáng)制 clang-format 使用 Ladybird 的 .clang-format 風(fēng)格文件不使用 Microsoft C 擴(kuò)展時(shí)無需此項(xiàng) C_Cpp.clang_format_style: file, // 縮進(jìn)設(shè)置 editor.tabSize: 4, editor.useTabStops: false, // 處理末尾空行 files.trimFinalNewlines: true, files.insertFinalNewline: true, // git 提交信息長度校驗(yàn) git.inputValidationLength: 72, git.inputValidationSubjectLength: 72, // 若 clangd 來自包管理器可在此指定其可執(zhí)行文件路徑 clangd.path: clangd-18, clangd.arguments: [ --header-insertionnever // 避免 clangd 自動(dòng)插入 #include ] }幾個(gè)值得注意的點(diǎn)Build/**的排除同時(shí)作用于文件樹和全文搜索別讓海量生成代碼淹沒你的檢索clangd.arguments里的--header-insertionnever關(guān)閉 clangd 自動(dòng)插入頭文件的行為clangd.path只在 clangd 由包管理器安裝、不在默認(rèn) PATH 時(shí)才需要可按發(fā)行版改版本號(hào)示例是clangd-18。tasks.json一鍵構(gòu)建與運(yùn)行想讓編譯和運(yùn)行都變成一鍵操作就在.vscode/tasks.json里放這三個(gè)任務(wù)build lagom構(gòu)建 Lagom 相關(guān)組件、build默認(rèn)構(gòu)建任務(wù)、launch運(yùn)行瀏覽器。三者都用bash -c調(diào)Meta/ladybird.py并配了 problemMatcher讓錯(cuò)誤能高亮出來其中還包含對(duì).S匯編文件報(bào)錯(cuò)和ASSERTION FAILED斷言輸出的解析。.vscode/tasks.json{ version: 2.0.0, tasks: [ { label: build lagom, type: shell, problemMatcher: [ { base: $gcc, fileLocation: [ relative, ${workspaceFolder}/Build/release ] } ], command: [ bash ], args: [ -c, \Meta/ladybird.py build\ ], presentation: { echo: true, reveal: always, focus: false, group: build, panel: shared, showReuseMessage: true, clear: true } }, { label: build, type: shell, command: bash, args: [ -c, Meta/ladybird.py build ], problemMatcher: [ { base: $gcc, fileLocation: [ relative, ${workspaceFolder}/Build/release ] }, { source: gcc, fileLocation: [ relative, ${workspaceFolder}/Build/release ], pattern: [ { regexp: ^([^\\s]*\\.S):(\\d*): (.*)$, file: 1, location: 2, message: 3 } ] } ], group: { kind: build, isDefault: true } }, { label: launch, type: shell, command: bash, args: [ -c, Meta/ladybird.py run ladybird ], options: { env: { // 在此填入自定義運(yùn)行環(huán)境變量 } }, problemMatcher: [ { base: $gcc, fileLocation: [ relative, ${workspaceFolder}/Build/release ] }, { source: gcc, fileLocation: [ relative, ${workspaceFolder}/Build/release ], pattern: [ { regexp: ^([^\\s]*\\.S):(\\d*): (.*)$, file: 1, location: 2, message: 3 } ] }, { source: Assertion Failed, owner: cpp, pattern: [ { regexp: ASSERTION FAILED: (.*)$, message: 1 }, { regexp: ^((?:.*)\\.(h|cpp|c|S)):(\\d*)$, file: 1, location: 3 } ], fileLocation: [ relative, ${workspaceFolder}/Build/release ] } ] } ] }日常構(gòu)建跑順了最后給核心進(jìn)程掛上斷點(diǎn)。Ladybird WebContent 進(jìn)程斷點(diǎn)調(diào)試attach 兩步法這一章先回答為什么不能直接啟動(dòng)調(diào)試而要附加attach再給出 macOS / Linux 兩套 launch.json 與啟動(dòng)命令。Ladybird 是多進(jìn)程架構(gòu)頁面內(nèi)容跑在獨(dú)立的 WebContent 進(jìn)程里所以調(diào)試器不能由 IDE 直接拉起來得附加到一個(gè)已經(jīng)跑起來的進(jìn)程上。整體結(jié)構(gòu)是這樣的流程分兩步——先用 Debug 預(yù)設(shè)啟動(dòng)并帶--debug-process WebContent讓瀏覽器停在原地等調(diào)試器再從 VS Code 的運(yùn)行和調(diào)試面板選附加配置。這個(gè)--debug-process參數(shù)由 Libraries/LibWebView/Application.cpp 解析處理。macOS 這邊把下面內(nèi)容放進(jìn)項(xiàng)目根目錄的.vscode/launch.json{ version: 0.2.0, configurations: [ { name: Attach to WebContent, type: lldb, request: attach, program: ${workspaceFolder}/Build/debug/bin/Ladybird.app/Contents/MacOS/WebContent, } ], }然后用 Debug 預(yù)設(shè)啟動(dòng)并指定 Homebrew 的 LLVM 工具鏈CC$(brew --prefix llvm)/bin/clang CXX$(brew --prefix llvm)/bin/clang BUILD_PRESETDebug ./Meta/ladybird.py run ladybird --debug-process WebContent此時(shí)執(zhí)行會(huì)暫停直到調(diào)試器附上。之后到運(yùn)行和調(diào)試菜單選Attach to WebContent就能開始調(diào)試。Linux 這邊.vscode/launch.json改用cppdbgGDB{ version: 2.0.0, configurations: [ { name: Attach and debug, type: cppdbg, request: attach, program: ${workspaceRoot}/Build/debug/libexec/WebContent, MIMode: gdb, }, ] }啟動(dòng)命令為BUILD_PRESETDebug Meta/ladybird.py run ladybird --debug-process WebContent之后同樣按 macOS 那節(jié)的步驟操作并記得先裝好gdb。兩處路徑的差異也值得留意macOS 的二進(jìn)制在Build/debug/bin/Ladybird.app/Contents/MacOS/WebContent.app 包結(jié)構(gòu)Linux 在Build/debug/libexec/WebContent——正好對(duì)上 CMakeBasePresets.json 里Debug_base的binaryDir約定。收尾前留一個(gè)小工具讓寫代碼更快。順手的小件License 頭代碼片段Ladybird 用 BSD-2-Clause 許可見 LICENSE。想在寫代碼時(shí)快速生成統(tǒng)一的版權(quán)頭把下面片段放進(jìn).vscode/ladybird.code-snippets在 C/C 文件里敲license就能展開{ License: { scope: cpp,c, prefix: license, body: [ /*, * Copyright (c) $CURRENT_YEAR, ${1:Your Name} ${2:YourNameEmail.com}., *, * SPDX-License-Identifier: BSD-2-Clause, */ ], description: License header } }全流程檢查單? 擴(kuò)展三件套裝好了? 首次構(gòu)建命令已執(zhí)行? 選定一個(gè)構(gòu)建預(yù)設(shè)? 編譯數(shù)據(jù)庫已生成? .vscode 三件套配好? WebContent 能下斷點(diǎn)【免費(fèi)下載鏈接】ladybirdTruly independent web browser項(xiàng)目地址: https://gitcode.com/GitHub_Trending/la/ladybird創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考