{"id":20409462,"url":"https://github.com/jsakamoto/findrazorsourcefile","last_synced_at":"2025-04-12T15:50:48.978Z","repository":{"id":66230879,"uuid":"386816224","full_name":"jsakamoto/FindRazorSourceFile","owner":"jsakamoto","description":"This is a set of NuGet packages that makes your Blazor apps display the source .razor file name that generated the HTML element under the mouse cursor when entering the Ctrl + Shift + F hotkeys.","archived":false,"fork":false,"pushed_at":"2025-04-12T12:43:41.000Z","size":2758,"stargazers_count":55,"open_issues_count":1,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-12T13:52:45.287Z","etag":null,"topics":["blazor","blazor-server","blazor-webassembly"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jsakamoto.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2021-07-17T02:31:31.000Z","updated_at":"2025-04-12T12:43:45.000Z","dependencies_parsed_at":null,"dependency_job_id":"da433778-7178-4e27-874f-40cd3e1afe53","html_url":"https://github.com/jsakamoto/FindRazorSourceFile","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsakamoto%2FFindRazorSourceFile","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsakamoto%2FFindRazorSourceFile/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsakamoto%2FFindRazorSourceFile/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsakamoto%2FFindRazorSourceFile/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsakamoto","download_url":"https://codeload.github.com/jsakamoto/FindRazorSourceFile/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248591904,"owners_count":21130146,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blazor","blazor-server","blazor-webassembly"],"created_at":"2024-11-15T05:41:59.353Z","updated_at":"2025-04-12T15:50:48.972Z","avatar_url":"https://github.com/jsakamoto.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FindRazorSourceFile\n\n[![NuGet Package](https://img.shields.io/nuget/v/FindRazorSourceFile.WebAssembly.svg?label=for+Blazor+WebAssembly)](https://www.nuget.org/packages/FindRazorSourceFile.WebAssembly/) [![NuGet Package](https://img.shields.io/nuget/v/FindRazorSourceFile.Server.svg?label=for+Blazor+Server)](https://www.nuget.org/packages/FindRazorSourceFile.Server/)\n\n## What's this?\n\nThis package makes your Blazor apps display the source .razor file name that generated the HTML element under the mouse cursor when entering the `Ctrl` + `Shift` + `F` hotkeys.\n\n![movie](https://raw.githubusercontent.com/jsakamoto/FindRazorSourceFile/master/.assets/movie-001-vs2022.gif)\n\n![movie](https://raw.githubusercontent.com/jsakamoto/FindRazorSourceFile/master/.assets/movie-001-vscode.gif)\n\n## 1. Installation\n\n### 1-a. for Blazor WebAssembly projects\n\n1. Add **the `FindRazorSource.WebAssembly` NuGet package** to your Blazor WebAssembly project.\n\n```shell\n\u003e dotnet add package FindRazorSource.WebAssembly\n```\n\n2. Add calling of **the `UseFindRazorSourceFile()` extension method** for `WebAssemblyHostBuilder` at the startup of your Blazor WebAssembly app.\n\n```csharp\n// This is a \"Program.cs\" file of a Blazor Wasm app.\n...\nusing FindRazorSourceFile.WebAssembly; // 👈 Open this namespace, and...\n...\nvar builder = WebAssemblyHostBuilder.CreateDefault(args);\nbuilder.UseFindRazorSourceFile(); // 👈 Add this line.\n...\n```\n\n\u003e [!NOTE]  \n\u003e The `UseFindRazorSourceFile()` method will work only when the target configuration is not \"Release\". That means any resources from \"FindRazorSource\" will not be loaded in the app after it is published with trimming. So, you don't need to worry about increasing the app size due to linking this library in the release environment. If you need to suppress the loading resources of this library in other configurations, please set the `EnableFindRazorSourceFile` property to `false` in the project file. For example, `\u003cEnableFindRazorSourceFile\u003efalse\u003c/EnableFindRazorSourceFile\u003e`.\n\n### 1-b. for Blazor Server projects\n\n1. Add **the `FindRazorSource.Server` NuGet package** to your Blazor Server project.\n\n```shell\n\u003e dotnet add package FindRazorSource.Server\n```\n\n2. Add calling of **the `UseFindRazorSourceFile()` extension method** for `IApplicationBuilder` at the startup of your Blazor Server app.\n\n```csharp\n// This is a \"Program.cs\" file of a Blazor Server app.\n...\nusing FindRazorSourceFile.Server; // 👈 Open this namespace, and...\n...\nvar builder = WebApplication.CreateBuilder(args);\n...\nif (app.Environment.IsDevelopment())\n{\n    ...\n    app.UseFindRazorSourceFile(); // 👈 Add this line.\n}\n...\n```\n\n### 1-c. for Blazor components library projects\n\nWhat you have to do is just adding **the `FindRazorSource` NuGet package** to the library project.\n\n```shell\n\u003e dotnet add package FindRazorSource\n```\n\n## 2. Usage\n\n### 2-1. Entering the \"Inspection Mode\"\n\nAfter installing `FindReSource` in your Blazor project, the Blazor app running in a web browser will respond to **`Ctrl` + `Shift` + `F` keyboard shortcuts** entering to **\"Inspection Mode\"**.\n\nWhen the app entered \"Inspection Mode,\" the entire browser screen will dim.\n\nIn this state, when you moved the mouse cursor, the HTML element under the mouse cursor will be highlighted, and **the tooltip that displayed the source .razor file name** generated that HTML element will appear.\n\n### 2-2. Entering the \"Lock Mode\"\n\nWhen you click an HTML element during the \"Inspection Mode\", the application's state will enter **the \"Lock Mode\"**.\n\nDuring the \"Lock Mode\", hovering the mouse cursor over the other HTML elements will have no effects.\n\nThe highlighting of the HTML element and showing the tooltip will be maintained.\n\nThis mode will be helpful for you to selecting and copy to the clipboard the source .razor file name displayed on the tooltip.\n\n### 2-3. Exit each mode\n\nTo escape from these modes, you can press **the `ESC` key**.\n\nAnd also, the mouse click during the \"Lock Mode\" will exit that mode and return to \"Inspection Mode\".\n\n## 3. Open in Visual Studio Code\n\nOnce you enable the `\"Open the .razor file of the clicked component in VSCode\"` option from the `\"Find Razor Source File\"` settings button, which is placed in the bottom-right corner of the page,\n\n![fig.3](https://raw.githubusercontent.com/jsakamoto/FindRazorSourceFile/master/.assets/fig3.png)\n\nthe .razor file of you clicked component will be opened in a Visual Studio Code editor.\n\n\n## 4. Open in Visual Studio IDE - the Visual Studio Extension for \"FindRazorSourceFile\"\n\nIf you are using Visual Studio IDE on Windows OS, please check out the Visual Studio Extension **\"Find Razor Source File - Browser Link Extension / VS2022 Extension\"** from the URL below.\n\n- **for Visual Studio 2019** - https://marketplace.visualstudio.com/items?itemName=jsakamoto.findrazorsource-browserlink-vsix\n- **for Visual Studio 2022** - https://marketplace.visualstudio.com/items?itemName=jsakamoto.findrazorsource-browserlink-vsix-2022\n\nIf you have installed the extension above in your Visual Studio IDE and configured everything required to enable the \"BrowserLink\" feature of Visual Studio, entering \"Lock Mode\" causes **opening the .razor file the source of clicked HTML element automatically in your Visual Studio!**\n\n### 3-1. Requirements\n\n- Visual Studio 2019 or 2022\n\n### 3-2. Usage\n\nTo enable \"Find Razor Source File - Browser Link Extension / VS2022 Extension\", please follow the instruction below.\n\n1. Of course, the target project must have installed the \"FindRazorSource\" feature, and please confirm the \"Inspection Mode\" and \"Lock Mode\" works well on a web browser before.\n\n2. Check on the \"Enable Browser Link\" dropdown menu in the toolbar of your Visual Studio.\n\n![fig.1](https://raw.githubusercontent.com/jsakamoto/FindRazorSourceFile/master/.assets/fig.1.png)\n\nIf you are using Visual Studio 2019, you have to do an additional instruction below. \n\n\u003cdetails\u003e\n\u003csummary\u003eAdditional instruction steps in VS2019\u003c/summary\u003e\n\n3. Add **the `Microsoft.VisualStudio.Web.BrowserLink` NuGet package** to your Blazor Server or ASP.NET Core host project.\n\n```shell\n\u003e dotnet add package Microsoft.VisualStudio.Web.BrowserLink\n```\n\n4. Add calling of **the `UseBrowserLink()` extension method** for `IApplicationBuilder` at the startup of your Blazor Server app or ASP.NET Core host app.\n\n\n```csharp\n// This is a \"Startup.cs\" file of a Server app.\n  ...\n  public void Configure(IApplicationBuilder app, ...)\n  {\n    if (env.IsDevelopment())\n    {\n      ...      \n      app.UseBrowserLink(); // 👈 Add this line.\n      ...\n    }\n    ...\n```\n\n**IMPORTANT NOTICE:** Please place the calling `UseBrowserLink()` before the calling `UseFindRazorSourceFile()` if the project is a Blazor Server.\n\n\u003c/details\u003e\n\nAfter doing the all steps of the instruction above and launch the project, the .razor source file will be opened in the Visual Studio when the HTML element is clicked in the \"Inspection Mode\" on a web browser! 👍\n\n## License\n\n[Mozilla Public License Version 2.0](https://github.com/jsakamoto/FindRazorSourceFile/blob/master/LICENSE.txt)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsakamoto%2Ffindrazorsourcefile","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsakamoto%2Ffindrazorsourcefile","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsakamoto%2Ffindrazorsourcefile/lists"}