使用Visual Studio时如何在ASP.NET MVC应用程序的浏览器日志中查看实际的React错误

拉尔斯·霍尔德(Lars Holdgaard)

我刚刚安装ReactJS.NET在我的应用程序中,并计划在单个页面上使用它。我习惯制作“整体”是React(以及Typescript和Webpack)的应用程序。

但是,如果我只是安装ReactJS.NET并导入教程代码,它就可以工作:

var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        Hello, world! I am a CommentBox.
      </div>
    );
  }
});
ReactDOM.render(
  <CommentBox />,
  document.getElementById('content')
);

但是,假设我们现在出错了,并且在render函数中创建了另一个div,因此我们应该得到一个错误,因为我们不能有相邻的元素。然后我只会得到以下错误:

在此处输入图片说明

在console.log中,我得到以下错误,但对我没有帮助:

Invoices:841 GET http://localhost:55075/Scripts/React/InvoiceBuilder/App.jsx net::ERR_ABORTED

While if I used the standard Visual Studio template for React, the actual error would show very clearly.

Is this because I am not using Typescript? Or is there another way to get the nice error handling inside Visual Studio and the Chrome browser when dealing with React?

hendrathings

As my comment,

visual studio only focus on backend or desktop. Even reshapher cannot handle like this. I suggest use vscode for editing jsx like this

If you still want use visual studio instead of vscode, you can check lint js/jsx using flow, here documentation. It is use cmd/powershell/terminal to check validate code.

First install flow globaly, link

npm install -g flow

then on root of your project, run init flow by cmd/powershell:

flow init

last, put on the top your js (ex: tutorial.jsx):

// @flow
class CommentBox extends React.Component {
    state = { data: this.props.initialData };
...

现在,您可以在cmd / powershell上运行以通过以下方式检查代码

flow status

然后看起来像这样:

终端上的流消息

坏消息是,还没有flowVisual Studio的插件扩展,目前只有vscode

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在cshtml ASP.NET Core中调试JavaScript脚本(通过使用Chrome浏览器或Visual Studio 2019)?

发布asp.net应用程序后,如何防止Visual Studio 2015启动浏览器?

如何从ASP.Net MVC 5应用程序中的浏览器获取URL

如何在Visual Studio 2012中更改ASP.NET MVC Web应用程序的SSL端口号

我们如何在Visual Studio Code中调试ASP.NET MVC Web应用程序?

如何在Visual Studio Community 2013中创建ASP.NET MVC 5 Web应用程序?

如何在 ASP.Net MVC 5 应用程序中重置 Visual Studio 提供的 SQL Server 中的主键计数器

Web Essentials浏览器链接仅在ASP.net 5应用程序中不能在Visual Studio 2015中工作

如何在Visual Studio中使用ASP.NET Core Web应用程序-API项目托管网页?

如何在带有Polymer的Visual Studio ASP.NET Core应用程序中使用照明元素

直接输入URL浏览器时,“ /”应用程序ASP.NET中的服务器错误

Visual Studio 2012中“ /”应用程序中的ASP.NET服务器错误

如何在 Visual Studio 中以编程方式打开项目时自动关闭或隐藏此 asp.net 主页窗口

如何在Visual Studio 2015中查看asp.net-mvc生成

如何使用Visual Studio将ASP.NET Web应用程序(.Net Framework)发布到FTP服务器?

如何在Visual Studio 2012上使用ASP.NET(包含MVC)C#配置或设置Log4Net

是否可以在浏览器中以Web应用程序形式查看Visual Studio Cordova项目的输出?

如何使用Visual Studio 2017性能分析ASP.NET IIS Web应用程序?

如何在不使用 Visual Studio Code 中的 git 的情况下将我的 ASP.Net Core Angular Web 应用程序发布到 Azure

MSBuild编译ASP.NET MVC4应用程序-使用Visual Studio 2015设计

使用 Visual Studio 代码创建 Asp.net MVC 应用程序(非核心)

如何使用Visual Studio代码在ASP.NET Core中添加ASP.NET身份

如何在 Visual Studio 2019(Asp.net Vb.net 項目)中添加 Adobe Pdf 查看器?

如何使用 React 在浏览器中显示控制台应用程序?

如何使用SpaTemplates向Visual Studio 2017中的ASP.NET Core Angular 2应用程序添加很棒的字体

两个浏览器窗口中的Web应用程序(ASP.NET MVC)

如何在Dynamics 365中添加子应用程序(使用asp.net mvc开发)?

调试时如何让 ASP.NET Core 崩溃而不是在 Visual Studio 2019 中返回错误响应?

如何在Visual Studio 2015中创建ASP.NET MVC 4项目