laravel-debugbar 笔记 + 兼容 requirejs 的解决方案

359 阅读1分钟

今天记录下 laravel-debugbar 出现的几个问题:

1.先简述下 laravel-debugbar github 地址: github.com/barryvdh/la…

安装:
	composer require barryvdh/laravel-debugbar --dev

laravel 5.5 支持了包自动发现,因此我们不需要手动添加 ServiceProvider。如果不想使用自动发现,可以手动将 ServiceProvider 添加到 config/app.php
	Barryvdh\Debugbar\ServiceProvider::class,

使用 Facade 来记录日志:
	config/app.php 添加:
		'Debugbar' => Barryvdh\Debugbar\Facade::class,

配置:
	发布配置文件,会在 config/ 目录下,生成 debugbar.php:
		php artisan vendor:publish --provider="Barryvdh\Debugbar\ServiceProvider"

	默认当 APP_DEBUG 设置为 true 时,会自动开启 debugbar。
	还可以在 config/debugbar.php 配置 enabled 来配置是否开启 debugbar。在 .env 中配置 DEBUGBAR_ENABLED

	具体代码可查看 laravel-debugbar 源码:
	    public function isEnabled()
	    {
	        if ($this->enabled === null) {
	            $config = $this->app['config'];
	            $configEnabled = value($config->get('debugbar.enabled'));

	            if ($configEnabled === null) {
	                $configEnabled = $config->get('app.debug');
	            }

	            $this->enabled = $configEnabled && !$this->app->runningInConsole() && !$this->app->environment('testing');
	        }

	        return $this->enabled;
	    }

推荐:
	不要使用 APP_DEBUG 来配置 debugbar,采用 DEBUGBAR_ENABLED 来配置,这个更灵活,不受 APP_DEBUG 约束(因为我们很多时候,得开启 laravel 的调试,但不想开启 debugbar)

2.开启了 debugbar,在 fastadmin 后台,报错,导致一些 js 无法引入 我简单改造了下 fastadmin,在 laravel 项目中,凑合使用,这个问题,估计大家不会碰到。如果碰到类似的,可以按我这样试着排查下。

简单扫了下 laravel-debugbar 源码,因为 debugbar 的原理就是,在页面上动态插入了一个调试面板,页面上插入了 html、js、css。
用到了 JavascriptRenderer.php 的 renderHead() 方法:
    public function renderHead()
    {
        $cssRoute = route('debugbar.assets.css', [
            'v' => $this->getModifiedTime('css')
        ]);

        $jsRoute = route('debugbar.assets.js', [
            'v' => $this->getModifiedTime('js')
        ]);

        $cssRoute = preg_replace('/\Ahttps?:/', '', $cssRoute);
        $jsRoute  = preg_replace('/\Ahttps?:/', '', $jsRoute);

        $html  = "<link rel='stylesheet' type='text/css' property='stylesheet' href='{$cssRoute}'>";
        $html .= "<script type='text/javascript' src='{$jsRoute}'></script>";

        if ($this->isJqueryNoConflictEnabled()) {
            $html .= '<script type="text/javascript">jQuery.noConflict(true);</script>' . "\n";
        }

        $html .= $this->getInlineHtml();


        return $html;
    }

插入:
	<link ..>
	<script ...>
	<script type="text/javascript">jQuery.noConflict(true);</script>
	内联的 html、js、css 代码

最终发现,屏蔽了 jquery 冲突代码,就 ok 了
	<script type="text/javascript">jQuery.noConflict(true);</script>

由 isJqueryNoConflictEnabled() 方法来检测

它是基于 maximebf/debugbar 包的方法,定位到该方法:
    public function isJqueryNoConflictEnabled()
    {
        return $this->enableJqueryNoConflict;
    }

通过关键字查询,发现 maximebf/debugbar 包中判断 jquery 不冲突的代码为:
    if ($this->enableJqueryNoConflict && !$this->useRequireJs) {
        $html .= '<script type="text/javascript">jQuery.noConflict(true);</script>' . "\n";
    }

而 laravel-debugbar 的代码为:
    if ($this->isJqueryNoConflictEnabled()) {
        $html .= '<script type="text/javascript">jQuery.noConflict(true);</script>' . "\n";
    }

少了个 useRequireJs 的判断,而我们出现这个问题,很可能就是因为使用了 requireJS(因为 FastAdmin 就是使用的 requireJS)

最终的解决方法:
	只能修改源码,来检测是否使用了 requireJS。(没时间分析,另外非专业 JS)
	暂时解决方法,debugbar 动态添加 use_require_js 配置项:

	1.laravel-debugbar 的 JavascriptRenderer.php 的 renderHead():
		if ($this->isJqueryNoConflictEnabled() && !config('debugbar.use_require_js')) {
            $html .= '<script type="text/javascript">jQuery.noConflict(true);</script>' . "\n";
		}

	2.我们不在 debugbar.php 中添加 use_require_js 配置项,然后获取不到,默认表示不使用 requireJS

	3.如果整站都使用的是 requirejs,我们在 app/Providers/AppServiceProvider.php 中『动态』配置 debugbar.use_require_js:
    	config(['debugbar.use_require_js' => true]);

    4.例如我的项目,只是后台使用了 requirejs,我在后台的公布部分配置 debugbar.use_require_js


/*
    github issues 搜索下,确实存在兼容 requirejs 的问题:
    	https://github.com/barryvdh/laravel-debugbar/pull/423

    	laravel-debugbar 作者给 maximebf/php-debugbar 提了一个修复
    		https://github.com/maximebf/php-debugbar/commit/c3268ca12248485a56d8fadf6489a277ef40d2e9

    	搞了半天,我们上面搜索到的 $this->useRequireJs,是作者后来提交的,但是 laravel-debugbar 如何配置兼容 requirejs

    	尝试:
    		1.app/Providers/AppServiceProvider.php 中调用:
    			// 表示使用了 requirejs
	    		Debugbar::getJavascriptRenderer()->setUseRequireJs();

	    	2.laravel-debugbar 的 JavascriptRenderer.php 源码添加 "!this->useRequireJs" 条件:
		        if ($this->isJqueryNoConflictEnabled() && !$this->useRequireJs) {
		            $html .= '<script type="text/javascript">jQuery.noConflict(true);</script>' . "\n";
		        }

		    报错更多......(作者难道完全没改 laravel-debugbar 这边的问题吗?)

		    求高人解答!!!

*/