angularjs - 迷你分析器 : How do I profile an AngularJS + WebAPI app?

Question

交叉发布on the MiniProfiler community .

我正在尝试将 MiniProfiler 放入我当前的堆栈中。我想我已经基本完成设置，但缺少 UI 方法，并且希望获得有关最佳操作方法的建议。

当前堆栈

• SQL for DB(包括 MiniProfiler 表)
• EF 6
• WebAPI 2 API 应用
• Angular 1.x。 UI 应用程序(单独的应用程序，没有 MVC 支持)——我认为此时它是 1.5.x。

因此，当前的 RenderIncludes() 方法对我不可用。

包含 JS 文件并将其设置为从 SQL Server 存储检索信息的最佳方法是什么？我知道这些文件包含在in the UI repo中，但我没有看到显式配置的文档。

到目前为止我尝试过的——Web API 应用

• 安装了 MiniProfiler 和 MiniProfiler.EF6 软件包。

Web.Config -- 添加处理程序

(不确定是否有必要):

<add name="MiniProfiler" path="mini-profiler-resources/*" verb="*" type="System.Web.Routing.UrlRoutingModule" resourceType="Unspecified" preCondition="integratedMode" />

添加了 CORS 过滤器以将 MiniProfiler ID 公开给我的客户端应用:

public class AddMiniProfilerCORSHeaderFilter : ActionFilterAttribute
{
    public override void OnActionExecuted(HttpActionExecutedContext actionExecutedContext)
    {
        actionExecutedContext.Response.Headers.Add("Access-Control-Expose-Headers", "X-MiniProfiler-Ids");
    }
}

添加该过滤器作为启动的一部分:

config.Filters.Add(new AddMiniProfilerCORSHeaderFilter());`

在Global.asax中，添加到Application_Start():

var connectionString = ConfigurationReader.GetConnectionString(Constants.ConfigSettings.CONNECTION_STRING_NAME);

MiniProfiler.Settings.Storage = new SqlServerStorage(connectionString);
MiniProfilerEF6.Initialize();

更新开始/结束请求:

   protected void Application_BeginRequest()
    {
        if (Request.IsLocal || ConfigurationReader.GetAppSetting(Constants.ConfigSettings.USE_PROFILER, false))
        {
            var sessionId = Guid.NewGuid().ToString();
            MiniProfiler.Start(sessionId);
        }
    }

    protected void Application_EndRequest()
    {
        MiniProfiler.Stop();
    }

到目前为止我尝试过的——客户端(Angular)应用

• 从 the Github Repo 获取 UI 文件
• 将 UI 目录复制到我的项目的输出

引用CSS:

<link rel="stylesheet" href="js/lib/miniprofiler/includes.css" />

调用 JavaScript

  <script async type="text/javascript" 
    id="mini-profiler" 
    src="js/lib/miniprofiler/includes.js?v=1.0.0.0" 
    data-current-id="" 
    data-path="https://localhost:44378/api/profiler/" 
    data-children="true" 
    data-ids="" 
    data-version="1.0.0.0" 
    data-controls="true" 
    data-start-hidden="false" 
    data-trivial-milliseconds="5">
  </script>

当前状态

当我做这些事情时，看起来它只是找不到合适的 WebAPI Controller 来呈现结果。如果我能找出该 Controller 在哪里或复制它(正如我目前正在尝试做的那样)，我想我会开展业务。

Answer 1

RenderIncludes函数结果为 <script>标签正在输出到页面。它在 UI Repo 中定义为 include.partial.html目前看起来像这样:

<script async type="text/javascript" id="mini-profiler" 
        src="{path}includes.js?v={version}" data-version="{version}" 
        data-path="{path}" data-current-id="{currentId}" 
        data-ids="{ids}" data-position="{position}" 
        data-trivial="{showTrivial}" data-children="{showChildren}" 
        data-max-traces="{maxTracesToShow}" data-controls="{showControls}"
        data-authorized="{authorized}" data-toggle-shortcut="{toggleShortcut}" 
        data-start-hidden="{startHidden}" data-trivial-milliseconds="{trivialMilliseconds}">
</script>

这是运行渲染的 Javascript 片段。

RenderIncludes功能is defined here 。它执行以下操作:

1. 确保您已设置存储空间
2. 检查当前请求是否有权查看结果
3. 获取当前用户未查看的个人资料的 ID
4. 获取 Id 以及您传递到函数中的任何其他参数，并将它们插入到 include.partial.html 中定义的脚本中的占位符中
5. 输出此 <script>

如果您无法调用 RenderIncludes ，您应该没有理由不能将脚本文件放在适当的位置，检索未查看的 ID，而是将它们与您想要的任何其他设置值一起放入 <script> 中。标签，并输出标签。

检索 Id 值的关键代码行是:

var ids = authorized 
            ? MiniProfiler.Settings.Storage.GetUnviewedIds(profiler.User) 
            : new List<Guid>();
ids.Add(profiler.Id);

哪里profiler是 MiniProfiler 的当前实例(根据当前请求运行。

您可能还需要确保可以处理脚本对/mini-profiler-resources/results 进行的调用(将探查器的 id 作为参数传递)。这个的内脏is located here在 GetSingleProfilerResult(HttpContext context)功能