如何让你在开发者工具中查看源代码有语法高亮和暗黑主题的效果
如何讓你在Chrome瀏覽器開發者工具中查看源代碼的時候,和在代碼編輯器中有同樣的代碼語法高亮的效果,而且還是深色主題,如果你是深色主題的愛好者就更合你意了。
國外的美女開發者為你實現了這樣功能的瀏覽器拓展,她的Github主頁:
?https://github.com/taniarascia
美女顏值高而且代碼寫得好,有9W的followers還有很多相當厲害的作品,如?takenote
安裝插件
進入chrome web store中搜索?DevTools Theme: New Moon?找到該插件,也可以從以下地址直接進入:
https://chrome.google.com/webstore/detail/devtools-theme-new-moon/lndddploiofhfpdcoclegenegblkhlfk?hl=en
點擊按鈕Add?to Chrome安裝拓展程序到你的瀏覽器
記住這時候還沒有生效,在瀏覽器地址欄輸入chrome://flags
找到“Developer Tools Experiments”,然后切換至“啟用”。
在DevTools中,單擊設置菜單,在左側Experiments菜單中找到Allow custom UI themes,然后選擇勾選上。
同時在Preferences菜單里將主題設置為暗模式(這很重要,否則主題看起來不正確)。設置好后重啟瀏覽器,然后隨便打開一個窗口訪問任意網頁。鼠標右擊檢查,打開開發者工具,就可以看到你想要的效果了。
總結
以上是生活随笔為你收集整理的如何让你在开发者工具中查看源代码有语法高亮和暗黑主题的效果的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 前端应该关注的2021年UI设计趋势
- 下一篇: 微页面设计开发指南