zoukankan      html  css  js  c++  java
  • 深入浅出Blazor webassembly之vs code 环境设置过程

    1. 安装了最新的 dot net SDK 6.0.100-preview.3.21202.5

    2.  为 VS code 安装 C#插件, 需要在 v1.23.12 以上版本

    3. 建立了blazor wasm 模版项目,  能正常运行起来.

     4. 但发现VS code 的 intellicode 功能失效, 比如代码导航功能不能使用

     ⒌ 在VS code 中重启 OmniSharp  , 发现如下报错.

    [info]: OmniSharp.Stdio.Host
            Starting OmniSharp on Windows 6.1.7601.65536 (x64)
    [info]: OmniSharp.Services.DotNetCliService
            DotNetPath set to dotnet
    [info]: OmniSharp.MSBuild.Discovery.MSBuildLocator
            Located 2 MSBuild instance(s)
                1: Visual Studio Community 2019 16.6.30225.117 16.6.0 - "C:Program Files (x86)Microsoft Visual Studio2019CommunityMSBuildCurrentBin"
                2: StandAlone 17.0.0 - "c:Usersdrothy64.vscodeextensionsms-dotnettools.csharp-1.23.14.omnisharp1.37.15-beta.7.msbuildCurrentBin"
    [info]: OmniSharp.MSBuild.Discovery.MSBuildLocator
            Registered MSBuild instance: Visual Studio Community 2019 16.6.30225.117 16.6.0 - "C:Program Files (x86)Microsoft Visual Studio2019CommunityMSBuildCurrentBin"
    [info]: OmniSharp.WorkspaceInitializer
            Invoking Workspace Options Provider: OmniSharp.Roslyn.CSharp.Services.CSharpFormattingWorkspaceOptionsProvider, Order: 0
    [info]: OmniSharp.WorkspaceInitializer
            Invoking Workspace Options Provider: OmniSharp.Roslyn.CSharp.Services.Completion.CompletionOptionsProvider, Order: 0
    [info]: OmniSharp.WorkspaceInitializer
            Invoking Workspace Options Provider: OmniSharp.Roslyn.CSharp.Services.RenameWorkspaceOptionsProvider, Order: 100
    [info]: OmniSharp.WorkspaceInitializer
            Invoking Workspace Options Provider: OmniSharp.Roslyn.CSharp.Services.ImplementTypeWorkspaceOptionsProvider, Order: 110
    [info]: OmniSharp.WorkspaceInitializer
            Invoking Workspace Options Provider: OmniSharp.Roslyn.CSharp.Services.BlockStructureWorkspaceOptionsProvider, Order: 140
    [info]: OmniSharp.Cake.CakeProjectSystem
            Detecting Cake files in 'c:Usersdrothy64Desktoplazorprojects'.
    [info]: OmniSharp.Cake.CakeProjectSystem
            Could not find any Cake files
    [info]: OmniSharp.MSBuild.ProjectSystem
            Detecting projects in 'c:Usersdrothy64Desktoplazorprojectslazordemo.sln'.
    [info]: OmniSharp.MSBuild.ProjectManager
            Queue project update for 'c:Usersdrothy64DesktoplazorprojectslazorDemo1lazorDemo1.csproj'
    [info]: OmniSharp.Script.ScriptProjectSystem
            Detecting CSX files in 'c:Usersdrothy64Desktoplazorprojects'.
    [info]: OmniSharp.Script.ScriptProjectSystem
            Could not find any CSX files
    [info]: OmniSharp.WorkspaceInitializer
            Configuration finished.
    [info]: OmniSharp.Stdio.Host
            Omnisharp server running using Stdio at location 'c:Usersdrothy64Desktoplazorprojects' on host 7256.
    [info]: OmniSharp.MSBuild.ProjectManager
            Loading project: c:Usersdrothy64DesktoplazorprojectslazorDemo1lazorDemo1.csproj
    [fail]: OmniSharp.MSBuild.ProjectManager
            Failed to load project file '{projectFilePath}'.
    Microsoft.Build.Exceptions.InvalidProjectFileException: 找不到指定的 SDK“Microsoft.NET.Sdk.BlazorWebAssembly”。  

    问题分析:

    程序能正常编译运行, 说明 .net 6 SDK安装没有问题,  项目文件也是正常的, 而且可以运行, 不应该会报 InvalidProjectFileException 异常啊.

    既然项目文件没有问题, 会不会是 OmniSharp.MSBuild 的问题呢? 仔细看日志, OmniSharp 找到了两个 msbuild, 一个是VS code 的C#插件自带的, 另一个是 VS 2019 16.6 自带的, 而且 OmniSharp  使用了 VS 2019 16.6 自带的 msbuild, 可能是 VS 2019 16.6 的msbuild 版本较老, 和 OmniSharp 的roslyn编译器不兼容.

    参考 https://github.com/OmniSharp/omnisharp-roslyn/issues/1700 解决了该问题.

    解决方案是: 强制 omnisharp 使用自带的 msbuild.

    具体为:

    (1) 新建 C:Users{username}.omnisharpomnisharp.json  文件

    (2) 编辑文件内容如下,  注意替换真实的路径

    {
        "msbuild": {
            "useBundledOnly": true
        }
     }

    或者直接指定msbuild路径

    {
        "MSBuild": {
            "msbuildoverride": {
                "MSBuildPath": "C:\Users\{username}\.vscode\extensions\ms-dotnettools.csharp-1.23.14\.omnisharp\1.37.15-beta.7\.msbuild\Current\Bin",
                "Name": "OmniSharp MSBuild",
                "PropertyOverrides": {
                    "MSBuildExtensionsPath": "C:\Users\{username}\.vscode\extensions\ms-dotnettools.csharp-1.23.14\.omnisharp\1.37.15-beta.7\.msbuild"
                }
            }
        }
    }

    然后重启 onmisharp 服务,  intellicode 恢复正常.

    6. VS code 仍然报 Error Acquisition .Net 错误 , 这个没有找到解决方案, 但不影响调试运行, 不用管它

    7. 在浏览器端调试 Blazor 程序

    步骤1: 按照正常方式运行 blazor 项目, 不需要在调试模式下.

    步骤2.  以启用调试模式打开 chrome 或edge 浏览器(不能使用firefox) , 命令行如下:
          msedge --remote-debugging-port=9222  http://localhost:5000/

          chrome --remote-debugging-port=9222  http://localhost:5000/

    使用上面命令后, 浏览器会监听 9222 调试端口, vscode为 blazor 项目已经实现了chrome devtools protocol 协议, 在vs code中开启项目, 除了会监听应用正常的http 5000端口外, 还会开启 63021  端口, 在浏览器端的 chrome devtools 会连接 63021 端口.

    步骤3: 在浏览器打开 http://localhost:5000/ 页面的tab 页面内, 使用 Shift+Alt+D 进入一个专门的 devtools 界面.

    在 devtools 的sources tab页下, 找到 file:// 节点下会显示 razor 和 C# 源码, 还可以设置断点, 可以watch 变量.

    8. 在VS code 端调试代码 (未成功)

    步骤1: 首先安装 blazorWasm 调试插件

     步骤2: 按 F5 快捷键, VS 自动为项目创建 launch.json 文件, 但接下来报如下错误.

    项目结构为:

    可以确定是 .vscode 目录应该放在 blazorDemo1 项目之下, 但实际却和 blazorDemo1 目录同级. 

    VS code 重新打开blazorDemo1 项目, 按F5 就能将 .vscode 目录建在blazorDemo1 项目之下,  可以看出调试进程全部启动成功.

    但比较悲剧的是, 在VS code中不管如何设置断点, 都不能在断点处停下来.

  • 相关阅读:
    myisamchk命令修复表操作
    CentOS下的yum upgrade和yum update区别
    CentOS 6.9/7通过yum安装指定版本的MySQL
    Linux下Shell去除空行的方法
    Linux下环境变量设置技巧
    交互设计师如何做运营需求-以网易严选邀请新人功能设计为例
    对应用启动时间的关注和获取
    快速发现并解决maven依赖传递冲突
    mock测试方法及实践改进
    网易杭研易盾实习心得(4)
  • 原文地址:https://www.cnblogs.com/harrychinese/p/blazor-dev-debug-cfg.html
Copyright © 2011-2022 走看看