Codex好用到爆！搓了一個前後端開發必備的瀏覽器插件
整理版優先睇
作者用 Codex 開發咗一個叫 DOM Lens 嘅瀏覽器插件，徹底取代 DevTools 嘅繁瑣操作，懸停即可拎到精確嘅節點信息。
呢篇文章係作者親身分享用 Codex 嘅經驗。佢原本用緊 Claude Code，但覺得每日用都提心吊膽（可能係 quota 或成本問題），轉用 Codex 後體驗好好多，速度同智力都全面碾壓。佢用 Codex 開發咗幾個工具，包括一個叫 jmp 嘅目錄跳轉工具，同埋今次重點介紹嘅 DOM Lens 瀏覽器插件。
作者本身係開發者，正喺度寫一個中後台管理系統。佢發現用 AI 寫前端好快，但修改就麻煩，尤其係揾 DOM 節點定位——要開 DevTools、喺 DOM 樹揾、複製 selector，仲要確認係咪唯一，好浪費時間。所以佢用 Codex 十零分鐘就搓咗 DOM Lens 呢個插件，解決呢個痛點。
整體結論係：DOM Lens 可以大幅提升前端開發效率，尤其係修改現有頁面時，懸停就拎到最精確嘅節點，唔使再開 F12 慢慢揾。而且仲有增強偽類控制、獨立元素尺寸顯示、快速節點移動同複製帶 URL 等功能，比 DevTools 更直接。
- Codex 速度同智力全面碾壓 Claude Code，作者退訂咗 Claude Code 全面擁抱 Codex。
- DOM Lens 插件可以懸停拎到最精確嘅 DOM 節點信息，免去 DevTools 繁瑣步驟。
- 增強偽類控制功能：強制鎖定 :hover 等偽類狀態，唔使同 DevTools 搶鼠標。
- 獨立顯示完整盒模型信息，唔使喺 Box Model 圖點嚟點去。
- 支持複製元素時帶埋頁面 URL，方便報 bug 時直接貼畀同事。
DOM Lens Chrome 商店
DOM Lens 瀏覽器插件，懸停拎 DOM 節點信息，增強 DevTools 功能。
點解轉用 Codex？
作者本身用開 Claude Code，但每日用都提心吊膽，唔知係 quota 問題定成本問題。轉用 Codex 之後，速度同智力都全面碾壓，體驗好舒服。佢仲用 Codex 接連開發咗幾個工具，徹底取代咗舊 workflow。
前端修改嘅痛點
作者用 AI 寫前端好快，但修改現有頁面就煩到嘔。尤其係揾 DOM 節點定位，要打開 DevTools → 喺 DOM 樹翻找 → 右鍵 Copy Selector → 粘貼後發現唔夠唯一 → 再返嚟改。呢個 loop 好浪費時間，而且而家 CLI 窗口太多，唔想再開多個 F12 佔位。
所以佢就用 Codex 十零分鐘搓咗DOM Lens呢個瀏覽器插件，直接喺頁面懸停就拎到最精確嘅節點。
- 唔使再開 DevTools 逐個揾，懸停就拎到精確選擇器。
- 節點信息係最直接最乾淨嘅上下文，提交畀 AI 指邊打邊。
- 比起用自然語言寫 prompt，元素節點信息準確好多。
DOM Lens 嘅增強功能
除咗拎節點信息，DOM Lens 仲有幾個好實用嘅功能：
- 1 增強偽類控制：強制鎖定 :hover 等偽類狀態，將樣式規則從 stylesheet 抽出來重寫為屬性選擇器匹配，唔使同 DevTools 搶鼠標。
- 2 獨立元素尺寸展示：鎖定後直接顯示完整盒模型信息，border-box 同 content-box 尺寸、四邊內容一次過出曬。
- 3 透過節點層級關係快速移動：用增強面板可以快速定位到父級、子級、平行節點，真係閉眼操作。
- 4 複製帶頁面 URL：報 UI bug 時快速將頁面 + 元素 + 選擇器一齊複製，唔使手動拼。
總結：開發者新寵
DOM Lens 已經上架到 Google Chrome 商店，作者話老規矩，整理完代碼後會同步至字節筆記本星球。如果你都成日要改前端頁面，不妨試下呢個插件，真係好用到爆。
而家用 Codex 搓呢啲小工具真係好快，作者建議大家可以多啲用 AI 幫手解決日常工作嘅小痛點。
Codex真係好用得緊要。
比起官方Claude Code每日用得心驚膽跳，Codex嘅使用體驗真係爽到爆，無論係速度定係智力水平，都完全贏幾條街。
用佢接連開發咗幾個好好用嘅開發工具，完全取代咗之前嘅老舊工作流程。
受夠咗autojump！重新寫咗一個更識你嘅目錄跳轉工具 jmp可以快速索引同切換之前跳轉過嘅目錄，好啱喺CLI界面度用。
琴日又用佢十分鐘整咗一個前後端開發必備嘅瀏覽器插件DOM Lens。
原因係我最近寫緊一個中後台管理系統，而家用AI寫前端頁面真係手到拿來，但係修改起嚟就好鬼麻煩。
就以管理系統頁面為例，功能差唔多，但係裏面嘅互動細節各有不同，要喺呢個基礎上做二次修改開發，最麻煩就係揾節點嘅定位。
你要打開 DevTools → 喺 DOM 樹度翻來翻去 → 右鍵 Copy Selector → 貼上之後發現唔夠唯一 → 又要返轉頭改。
咁做都唔係唔得，只係太浪費時間，而且而家啲CLI視窗太多，真係唔想再開多一個嚟霸住屏幕空間。
所以就快脆寫咗呢個DOM Lens瀏覽器插件。
開咗DOM Lens嘅功能掣之後，只要懸停一下就直接拎到最精確嘅節點。
佢最大嘅好處係唔使再行曬上面嘅步驟，每次都要另開一個F12控制枱逐個查。
而且比起用自然語言苦惱咁寫頁面描述修改提示詞，元素節點信息可以話係最直接最乾淨亦係最正確嘅上下文描述，交俾AI指邊打邊。
唔止拎節點信息咁簡單，DOM Lens喺好多方面都加咗增強功能：
增強型嘅偽類控制
例如修改頁面嘅時候，會遇到好多按鈕 hover 效果唔啱，DevTools 裏面手動揀 :hover 偽類之後，鼠標一鬱元素就變咗。
再例如下拉菜單更典型，展開想檢查，鼠標移開就收起咗。
DOM Lens 可以強制偽類狀態，直接將樣式規則從頁面所有 stylesheet 中抽出來重寫成屬性選擇器匹配，唔需要同 DevTools 爭鼠標。
獨立嘅元素尺寸展示
有個元素尺寸唔啱，要喺 DevTools 嘅 Box Model 圖上點來點去，margin、padding、border 分開睇。
DOM Lens 鎖定之後直接顯示完整嘅盒模型信息，border-box 同 content-box 尺寸、四邊內容一次過曬出嚟。
透過節點嘅層級關係快速移動
每次喺Console裏面都要來回揀，可能都揀唔中，用咗增強型面板之後，透過父級、子級同平級關係，可以快速定位到相關節點，真係閉眼操作。
複製出嚟想連埋頁面 URL 俾同事
後端或者QA報咗一個 UI bug，想快啲將邊個頁面 + 邊個元素 + 咩選擇器一次過掟入羣組。
之前打開複製連 URL，貼出嚟就係 URL + 內容，唔使手動拼。
簡單講，DevTools 係全功能工具箱，將節點元素嘅信息然後複製走呢件事做到兩秒內完成。
更多功能可以自己體驗一下。
已經上架咗去Google Chrome商店。
https://chromewebstore.google.com/detail/dom-lens/dodhpfmciaecgkibimnjbfodnjnfpeii?authuser=0&hl=zh-CN
老規矩，整理完代碼之後，會同步至字節筆記本星球。
Codex真的是好用到爆了。
相比較官方Claude Code用每天用的提心吊膽，Codex使用體驗真的舒爽無比不管是速度還是智力水平，都全面碾壓Claude Code。
用它接連開發了幾個非常好用的開發工具，徹底取代了之前陳舊的工作流。
受夠了autojump！重寫了一個更懂你的目錄跳轉工具 jmp可以快速索引並切之前跳轉的目錄，非常適合於在CLI界面使用。
昨天又用它十分鐘搓了一個前後端開發必備的瀏覽器插件DOM Lens。
起因是我最近在寫一箇中後的管理系統，現在用AI寫前端頁面真的是手拿把掐，但是修改起來就特別的繁瑣。
就拿管理系統頁面來說，功能趨同，但是裏面交互細節各不一樣，要在此基礎上做二次的修改開發，最繁瑣的就是找節點的定位。
你得打開 DevTools → 在 DOM 樹裏翻找 → 右鍵 Copy Selector → 粘貼後發現不夠唯一 → 再回來改。
這樣也不是不行，就是太費時間，而且現在各種CLI的窗口太多，真的不想再多開一個來佔用屏幕空間了。
所以就快速寫了這個DOM Lens瀏覽器插件。
打開DOM Lens的功能開關後，只需要懸停一下直接拿到的就是能最精確的節點。
它最大的好處不用再去走一遍上面的過程，每次都得單獨開一個F12控制枱一個個的翻查。
而且相比較用自然語言來費勁腦汁寫頁面描述修改提示詞，元素節點信息可以說是最直接最乾淨也是正確的上下文描述，提交給AI指哪打哪。
不只是拿節點信息這些，DOM Lens在很多方面都做了增強功能：
增強型的偽類控制
比如修改頁面的時候，會遇到很多的按鈕 hover 效果不對，DevTools 裏手動勾選 :hover 偽類後，鼠標一移動元素就變了。
再比如下拉菜單更典型，展開想檢查，鼠標移開就收起了。
DOM Lens 可以強制偽類狀態直接把樣式規則從頁面所有 stylesheet 中提取出來重寫為屬性選擇器匹配，不用和 DevTools 搶鼠標。
獨立的元素尺寸展示
一個元素尺寸不對，要在 DevTools 的 Box Model 圖上點來點去，margin、padding、border 分開看。
DOM Lens 鎖定後直接顯示完整的盒模型信息，border-box 和 content-box 尺寸、四邊內容一次性全出來。
通過節點的層級關係快速移動
每次在Console裏面都要來回選，可能都選不中，使用增強型的面板之後，通過父級、子級以及平行關係，可以快速的定位到相關的節點，真閉眼操作。
複製出來想帶頁面 URL 給同事
後端或QA報了一個 UI bug，想快速把哪個頁面 + 哪個元素 + 什麼選擇器一起丟到羣裏。
之前打開復制帶 URL，粘貼出來就是 URL + 內容，省得手動拼。
簡單說，DevTools 是全功能工具箱，把節點元素的信息然後複製走這件事做到兩秒內完成。
更多功能可以自己體驗一下。
目前已上架到了Google Chrome商店。
https://chromewebstore.google.com/detail/dom-lens/dodhpfmciaecgkibimnjbfodnjnfpeii?authuser=0&hl=zh-CN
老規矩，整理完代碼之後，會同步至字節筆記本星球。