Hello Blazor:（13）查找HTML元素对应.razor文件

Posted 2021-12-06 dotNET跨平台

前言

Blazor是基于组件的开发，每个组件都是以一个.razor文件形式存在。

当应用程序变得越来越大并且.razor文件的数量和层次结构越来越多时，想很快弄清页面上的html元素是由哪个组件生成的，就变得不那么容易了！

FindRazorSourceFile介绍

FindRazorSourceFile可以让你的Blazor应用程序显示鼠标光标下对应的HTML元素的源.razor文件名。

它支持Blazor WebAssembly、Blazor Server、Blazor组件库。

Demo

FindRazorSourceFile使用也非常简单，以Blazor WebAssembly应用程序为例。

首先，引用NuGet包FindRazorSource.WebAssembly。

然后，在Main方法添加调用代码：

var builder = WebAssemblyHostBuilder.CreateDefault(args);

builder.UseFindRazorSourceFile();

现在启动程序，运行效果并没有什么变化，直到你按下Ctrl + Shift + F热键，将打开“检查模式”：

如果你同时在VS 2019中安装了Find Razor Source File - Browser Link Extension扩展，在上述“检查模式”期间用鼠标单击HTML元素将直接打开对应的razor文件。

结论

FindRazorSourceFile使用有一定限制：

首先，浏览器中显示的HTML元素最多可以确定到文件，而不能到具体代码行

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

具体原因，我们下回分解！