前端調試：查看動態生成的 DOM 元素並提取代碼

問題場景

使用 JavaScript Infovis Toolkit 做數據可視化，頁面中某 `div` 內容由 JS 動態生成。在記事本打開源文件、或 Dreamweaver 設計視圖中**看不到**該部分 HTML 代碼，無法直接修改。

根本原因：源代碼 vs 渲染後 DOM

• **查看源代碼 / 記事本打開**：顯示**服務器發送的原始 HTML**，不包含 JS 動態插入的內容。
• **開發者工具 Elements 面板**：顯示**當前渲染後的 DOM 樹**，包含所有動態生成的節點。

解決方案：從開發者工具提取動態 HTML

1. 打開瀏覽器開發者工具 (F12 或右鍵「檢查」)。
2. 切換到 **Elements (元素)** 面板。
3. 定位到目標動態生成的容器節點（如 `
   `）。
4. **右鍵該節點 → Copy → Copy outerHTML**（或 Copy innerHTML）。
5. 粘貼到編輯器（VS Code、Sublime、記事本）即可獲得完整動態生成的 HTML 代碼。

圖片參考

原始頁面截圖（紅框為動態內容）：

Dreamweaver 代碼視圖（缺少動態部分）：

進階技巧

• 斷點調試生成邏輯：在 Sources 面板對生成代碼的 JS 函數打斷點，觀察變量、調用棧，理解數據如何映射為 DOM。
• Sources 面板編輯保存：Chrome DevTools 支持在 Sources 面板直接編輯 JS/CSS/HTML 並保存到本地（需配置 Workspace），實現「所見即所得」修改。
• React/Vue DevTools：若使用框架，安裝對應擴展，可直接查看組件樹、Props/State，比原始 DOM 更直觀。
• 導出完整頁面：`document.documentElement.outerHTML` 在 Console 執行，可獲取當前完整 DOM 序列化字符串。

最佳實踐建議

「你的 id-list 那個控件是 js 動態加載的，你審查元素當然可以看得到，保存的時候存的是頁面的源代碼，和你右鍵查看源代碼效果一樣。你審查元素後，點擊 html 節點，右鍵『復制 HTML』代碼就好了。」—— 最佳回答精準指明操作路徑。

• **不要用記事本/Dreamweaver 開發現代前端**：使用 VS Code + Live Server / Vite / Webpack Dev Server，享受熱重載、源碼映射、智能提示。
• **理解「構建產物」與「源碼」區別**：生產環境看到的是打包壓縮後的產物，開發調試應針對源碼（Source Map 支持）。
• **動態內容修改正確姿勢**：找到生成該內容的 JS 模塊/組件，修改源碼邏輯/模板，重新構建，而非手工編輯渲染後的 HTML。