前言

Blazor是基于組件的開發(fā)，每個組件都是以一個.razor文件形式存在。

當(dāng)應(yīng)用程序變得越來越大并且.razor文件的數(shù)量和層次結(jié)構(gòu)越來越多時，想很快弄清頁面上的HTML元素是由哪個組件生成的，就變得不那么容易了！

FindRazorSourceFile介紹

FindRazorSourceFile可以讓你的Blazor應(yīng)用程序顯示鼠標(biāo)光標(biāo)下對應(yīng)的HTML元素的源.razor文件名。

它支持Blazor WebAssembly、Blazor Server、Blazor組件庫。

Demo

FindRazorSourceFile使用也非常簡單，以Blazor WebAssembly應(yīng)用程序為例。

首先，引用NuGet包FindRazorSource.WebAssembly。

然后，在Main方法添加調(diào)用代碼：

var?builder?=?WebAssemblyHostBuilder.CreateDefault(args);builder.UseFindRazorSourceFile();

現(xiàn)在啟動程序，運行效果并沒有什么變化，直到你按下Ctrl + Shift + F熱鍵，將打開“檢查模式”：

如果你同時在VS 2019中安裝了Find Razor Source File - Browser Link Extension擴(kuò)展，在上述“檢查模式”期間用鼠標(biāo)單擊HTML元素將直接打開對應(yīng)的razor文件。

結(jié)論

FindRazorSourceFile使用有一定限制：

首先，瀏覽器中顯示的HTML元素最多可以確定到文件，而不能到具體代碼行

其次，并不是所有HTML元素都能用于定位。

具體原因，我們下回分解！

總結(jié)

以上是生活随笔為你收集整理的Hello Blazor:（13）查找HTML元素对应.razor文件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。