Visual Studio+Javascript的前后端调试方法你真的会了么？

蔚1 发布时间：2020-03-08 23:30:56 ，浏览量：0

对于很多刚入门的程序员，或者已经入坑几年的所谓的有经验的程序员仍然在开发过程中，因为不知道、或者了解较少的调试技巧，调试方法，导致无法在项目开发过程中快速有效的开发，或者无法在使用第三方框架的情况下，很好的阅读源码，导致没有办法很好的理解对应的实现过程，所以本 Chat 总结相关的调试技巧和学习方法。

在本场 Chat 中，会讲到如下内容：

Visual Studio 的常见调试方法
JavaScript 的常见调试方法
学习并引用第三方的 C# 开源项目，ServiceStack.Redis
学习并引用第三方的 Javascript 插件，Swiper.js

适合人群：需要高效调试项目和学习第三方开源项目的技术人员

对于.NET 的后端工程师来说，Visual Studio 是一款必须要掌握的 IDE。对于前端工程师来说，Javascript 是前端开发过程中必不可少的使用语言。但是，对于很多刚入门的程序员，或者已经入坑几年的所谓的有经验的程序员仍然在开发过程中，因为不知道、或者了解较少的调试技巧，调试方法，导致无法在项目开发过程中快速有效的开发，或者无法在使用第三方框架的情况下，很好的阅读源码，导致没有办法很好的理解对应的实现过程，所以本 Chat 总结相关的调试技巧和学习方法。

在本场 Chat 中，会讲到如下内容：

Visual Studio 的常见调试方法
Javascript 的常见调试方法
学习并引用第三方的 C#开源项目,ServiceStack.Redis
学习并引用第三方的 Javascript 插件,Swiper.js

适合人群：需要高效调试项目和学习第三方开源项目的技术人员

在工作过程中，笔者发现有很多同学，或者是刚毕业的，或者是已经上班了好几年了都或多或少的对 C#的调试方法，或者是 JavaScript 的调试方法，掌握的不够。在这种情况下，它就会影响调试的效率。不同的调试方法大同小异，如果选择一个更加合适的方法去调试，能够在单次调试中能够节省几秒钟，几分钟，乘以每天调试的次数，可能能够节省出很客观的时间。

下面直接介绍具体的执行过程。

Visual Studio 的常见调试方法

使用 ASP.NET MVC 应用程序的项目模板，如下图：在这里插入图片描述

如下介绍三种调试方法

使用 IIS Express

让我们来正式认识一次，IIS Express，可能你知道它是干什么用的，但是从未了解过它的官方解释。在这里插入图片描述（图片来自：https://docs.microsoft.com）

从这一段描述中看出 IIS Express 对应的三个特点。

lightweight：轻量级

self-contained：独立的

optimized for developers：为开发人员优化的

在使用 IIS Express 调试的时候比较方便，直接点击 IIS Express 就能够启动调试，类似于 Eclipse 中的小蜘蛛。

点击后会直接启动浏览器，并打开对应端口的主页。在这里插入图片描述在任务栏中能够看到多处的 IIS Express 的小图标：在 IIS Express 上鼠标点击右键会出现相应的选项：可以看到 IIS Express 对应的信息：另外 IIS Express 对应的浏览器，可以通过启动按钮的右侧倒三角符号，进行选择，这样启动后，会根据选择默认启动所选择的浏览器。在这里插入图片描述以上是第一种最简单的方法，通过 IIS Express 启动项目，查看对应的运行过程，并根据需求进行跟踪调试。

例如，下默认的 HomeController 控制器下对应的 Index 方法中添加断点。在这里插入图片描述点击菜单栏中的工具栏中的 IIS Express，当运行到对应断点位置的时候，就能够直接命中断点，查看相应的信息。如下图：以上就是使用 IIS Express 的调试方法，也是创建 web 项目后，默认的运行方法

本地 IIS 调试

不同于上一种方法的是，本地 IIS 调试进行配置。但是当我们的解决方案中，项目比较多的情况下，使用本地 IIS 调试，可以固定对应的进程，便于附加到进程调试。

具体过程如下：

1）项目名称鼠标点击右键，选择“属性”，得到“属性”窗口，选择左侧 Web 选项，配置服务器在这里插入图片描述 2）选择本地 IIS 后，会生成对应的项目 URL，一般不建议对默认的 URL 进行修改，否则会在使用过程中可能导致路由的解析需要进行额外的考虑。选择后点击右侧的创建虚拟目录，便能够在本地的 IIS 下生成对应于 Default 站点下的应用程序

3）刷新后，得到上一步所创建的对应的应用程序。在这里插入图片描述 4）浏览应用程序，在计算机默认浏览器中会打开对应的应用程序通过这种方式，将应用部署到本地 IIS，可以在任何情况下，通过浏览器访问本机的 URL，直接查看应用运行的状况。如果单纯调试前端的 CSS 或者 JavaScript 的情况下，就不需要进行 visual studio 的调试了，具体方法稍后介绍。