README

以下是快速安装指南

将捆绑包安装到您的 API 项目

composer req mgdsoft/symfony-profiler-spa --dev

将新路由添加到您的 API 项目

# config/routes/web_profiler.yaml
when@dev:
    mgd_profiler_spa:
        resource: '@SymfonyProfilerSPABundle/Resources/config/routing/routing.yml'
        prefix: /

如果您不使用资产组件，请创建资产或复制

bin/console assets:install

此执行将 'load_toolbar_spa.js' 文件复制到您的公共文件夹，您只需将其包含在您的 前端项目 的html文件中即可

<script src="//yourdomain.lol/bundles/symfonyprofilerspa/load_toolbar_spa.js"></script>

就是这样！load_toolbar_spa.js 是用纯js创建的，因此它适用于所有框架和库。提供XHR和fetch拦截器。

JS配置

对于自定义URL工具栏，您必须使用此自定义属性 data-url-toolbar

<script src="//yourdomain.lol/bundles/symfonyprofilerspa/load_toolbar_spa.js" defer data-url-toolbar="{ORIGIN}/internal/toolbar/{TOKEN}"></script>

它的工作原理

如果您查看 src/Resources/public/load_toolbar_spa.js，您将找到一个简单的脚本，它创建一个HTTP拦截器。它检测到的第一个 x-debug-token-link 标头将触发对API服务器的请求以检索分析器。

CORS问题

不要忘记您的nginx配置以避免CORS

add_header Access-Control-Allow-Origin "http://yourdomain.lol";
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept, Authorization, x-debug-token-link, X-Debug-Token";
add_header Access-Control-Expose-Headers "X-Debug-Token, X-Debug-Token-Link";

酷炫的功能

不要忘记配置您的IDE以打开错误/控制器，有关更多信息，请访问 https://symfony.com.cn/doc/current/reference/configuration/framework.html#ide。如果您在配置PHPStorm时遇到问题，您可以使用此片段作为快速解决方案。

parameters:
    env(SYMFONY_IDE): "javascript: (function () { let file = '%%f'; file = file.replace('/var/www/your-project/', ''); let newUrl = 'https://:63342/api/file?file='+file+'&line=%%l'; fetch(newUrl); })()"

framework:
    ide: '%env(SYMFONY_IDE)%'

将 /var/www/your-project/ 替换为您的项目当前路径。它使用相对路径工作，因此它可以在Docker中使用。有关更多信息，请访问 https://www.develar.org/idea-rest-api/。”

享受吧！