Less开发指南（三）- 代码文件跟踪调试_html/css

首頁

web前端

html教學

Less开发指南（三）- 代码文件跟踪调试_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:04 PM

程式碼開發指南偵錯追蹤

案例背景：在大型网站中，css样式划分为多个模块文件，如reset.css，layout.css，skin.css等等（颗粒化越小，样式重用率越高），页面需要的时候引入它们即可！

回到less项目中这里，我们也可以将划分为 reset.less，layout.less，skin.less等，然后在本页面样式（如index.less）嵌入它们（嵌入的方式，就减少了多个HTTP请求，性能相对好，也可以了解为合拼），代码如下：

index.less

@import 'block/reset.less';@import 'block/layout.less';@import 'block/unit.less';

登入後複製

reset.less

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {    margin:0;padding:0;}

登入後複製

layout.less

.main{width:1000px;margin:0 auto;}

登入後複製

unit.less

.tips{background:#eee;color:#f60;}

登入後複製

然后页面就引入已经编译后的index.css文件

index.html

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <link rel="stylesheet" href="css/index.css"></head><body>    <div class="main">        <div class="tips">tips</div>    </div></body></html>

登入後複製

然后，当在调试 .tips 这块样式时，问题就来了，我怎么知道它是属于哪个模块的样式文件呢？重点来了，就是利用生成的 source map 进行代码文件跟踪

（1）如何生成呢？以考拉软件为例：

打钩选中，就会生成一份 index.css.map 文件

（2）在谷歌浏览器打开页面，按 F12，指向.tips样式，发现它已经被跟踪到unit.less这个模块文件里面了

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7870

Java教學

1649

CakePHP 教程

1407

Laravel 教程

1301

PHP教程

1244

Related knowledge

C++ 函式偵錯詳解：如何偵錯多執行緒函數中的問題？ May 02, 2024 pm 04:15 PM

C++多執行緒偵錯可使用GDB：1.啟用偵錯資訊編譯；2.設定斷點；3.使用infothreads查看執行緒；4.用thread切換執行緒；5.使用next、stepi、locals調試。實戰案例調試死鎖：1.使用threadapplyallbt列印堆疊；2.檢查執行緒狀態；3.單步執行主執行緒；4.使用條件變數協調存取來解決死鎖。

如何使用LeakSanitizer調試C++記憶體洩漏？ Jun 02, 2024 pm 09:46 PM

如何使用LeakSanitizer調試C++記憶體洩漏？安裝LeakSanitizer。透過編譯標誌啟用LeakSanitizer。運行應用程式並分析LeakSanitizer報告。識別記憶體分配類型和分配位置。修復記憶體洩漏，確保釋放所有動態分配的記憶體。

golang 函數調試和分析的捷徑 May 06, 2024 pm 10:42 PM

本文介紹了Go函數調試和分析的捷徑，包括：內建偵錯器dlv，用於暫停執行、檢查變數、設定斷點。日誌記錄，使用log包記錄訊息，在調試時查看。效能分析工具pprof，產生呼叫圖並分析效能，使用gotoolpprof分析資料。實戰案例：透過pprof分析記憶體洩漏，產生呼叫圖顯示導致洩漏的函數。

Java 並發程式設計如何進行並發測試與除錯？ May 09, 2024 am 09:33 AM

並發測試和調試Java並發程式設計中的並發測試和調試至關重要，以下技術可供使用：並發測試：單元測試：隔離並測試單一並發任務。整合測試：測試多個並發任務之間的交互作用。負載測試：評估應用程式在高負載下的效能和可擴展性。並發調試：斷點：暫停線程執行並檢查變數或執行程式碼。日誌記錄：記錄線程事件和狀態。堆疊追蹤：識別異常源頭。視覺化工具：監視執行緒活動和資源使用情況。

清華大學與智譜AI重磅開源 GLM-4：掀起自然語言處理新革命 Jun 12, 2024 pm 08:38 PM

自2023年3月14日開始，ChatGLM-6B以來，GLM系列模型受到了廣泛的關注與認可。特別是在ChatGLM3-6B開源之後，開發者對智譜AI推出的第四代模型充滿了期待。而這項期待，隨著GLM-4-9B的發布，終於得到了充分的滿足。 GLM-4-9B的誕生為了賦予小模型（10B及以下）更加強大的能力，GLM技術團隊經過近半年的探索，推出了這款全新的第四代GLM系列開源模型：GLM-4-9B。這一模型在確保精度的同時，大幅度壓縮了模型大小，具有更快的推理速度和更高的效率。 GLM技術團隊的探索沒