一、Debugbar 安裝與配置

1、使用 Composer 安裝該擴(kuò)展包：

composer require barryvdh/laravel-debugbar --dev

2、接下來(lái)運(yùn)行以下命令生成此擴(kuò)展包的配置文件 config/debugbar.php :

php artisan vendor:publish --provider="Barryvdh\Debugbar\ServiceProvider"

3、打開(kāi) config/debugbar.php 文件，修改如下配置：

return [

...

'capture_ajax' => false,

'inject' => false,

...

],

4、打開(kāi) app/Providers/RouteServiceProvider.php 文件，在 boot 方法里添加一條渲染路由

public function boot()

{

if ($this->app->environment('local')) {

Route::group(['prefix' => config('debugbar.route_prefix')], function () {

Route::get('render', function () {

$debugBar = debugbar();

$renderer = $debugBar->getJavascriptRenderer();

$renderer->setOpenHandlerUrl('/' . config('debugbar.route_prefix') . '/open');

$script = $renderer->render();

preg_match('/(?:

$js = $matches[1];

$jsRetryFn = "function retry(times, fn, sleep) {

if (!times) times = 1;

if (!sleep) sleep = 50;

--times;

try {

return fn();

} catch (e) {

if (!times) throw e;

if (sleep) {

setTimeout(function() {

retry(times, fn, sleep);

}, sleep);

}

}

}\n";

// sleep(1);

echo "${jsRetryFn}\nretry(50, function() {\n${js}\nwindow.phpdebugbar = phpdebugbar\n}, 200);";

exit;

});

});

}

parent::boot();

}

5、打開(kāi) app/Providers/AppServiceProvider.php 文件，在 boot 方法里添加如下代碼：

public function boot()

{

if (app()->environment('local') && request()->isJson()) {

$debugbar = debugbar();

$debugbar->sendDataInHeaders(true);

}

}

二、react 配置

1、在入口模板文件 document.ejs 載入 js 和 css 文件，并且渲染debugbar

<% if(context.env !== 'production') { %>

2、api 請(qǐng)求自動(dòng)刷新debugbar渲染

/**

* request 網(wǎng)絡(luò)請(qǐng)求工具

* 更詳細(xì)的 api 文檔: https://github.com/umijs/umi-request

*/

import { extend } from 'umi-request';

import { notification } from 'antd';

import cookie from 'cookie';

import { getToken } from '@/utils/authority';

const codeMessage = {

200: '服務(wù)器成功返回請(qǐng)求的數(shù)據(jù)。',

201: '新建或修改數(shù)據(jù)成功。',

202: '一個(gè)請(qǐng)求已經(jīng)進(jìn)入后臺(tái)排隊(duì)(異步任務(wù))。',

204: '刪除數(shù)據(jù)成功。',

400: '發(fā)出的請(qǐng)求有錯(cuò)誤，服務(wù)器沒(méi)有進(jìn)行新建或修改數(shù)據(jù)的操作。',

401: '用戶沒(méi)有權(quán)限(令牌、用戶名、密碼錯(cuò)誤)。',

403: '用戶得到授權(quán)，但是訪問(wèn)是被禁止的。',

404: '發(fā)出的請(qǐng)求針對(duì)的是不存在的記錄，服務(wù)器沒(méi)有進(jìn)行操作。',

406: '請(qǐng)求的格式不可得。',

410: '請(qǐng)求的資源被永久刪除，且不會(huì)再得到的。',

422: '當(dāng)創(chuàng)建一個(gè)對(duì)象時(shí)，發(fā)生一個(gè)驗(yàn)證錯(cuò)誤。',

500: '服務(wù)器發(fā)生錯(cuò)誤，請(qǐng)檢查服務(wù)器。',

502: '網(wǎng)關(guān)錯(cuò)誤。',

503: '服務(wù)不可用，服務(wù)器暫時(shí)過(guò)載或維護(hù)。',

504: '網(wǎng)關(guān)超時(shí)。',

};

/**

* 異常處理程序

*/

const errorHandler = async (error: { response: Response }): Promise => {

const { response } = error;

if (response && response.status) {

const { status, url } = response;

if (status === 401) {

// @ts-ignore https://umijs.org/zh/guide/with-dva.html#faq

window.g_app._store.dispatch({ type: 'login/logout' });

}

const errorText = codeMessage[response.status] || response.statusText;

const { message: msg } = await response.json();

notification.error({

message: `請(qǐng)求錯(cuò)誤 ${status}: ${url}`,

description: msg || errorText,

});

const error: any = new Error(msg || errorText);

error.response = response;

throw error;

}

};

/**

* 配置request請(qǐng)求時(shí)的默認(rèn)參數(shù)

*/

const request = extend({

prefix: '/api',

errorHandler, // 默認(rèn)錯(cuò)誤處理

credentials: 'include', // 默認(rèn)請(qǐng)求是否帶上cookie

headers: {

Accept: `application/x.sheng.${API_VERSION || 'v1'}+json`, // eslint-disable-line

'Content-Type': 'application/json; charset=utf-8',

},

});

// request攔截器, 改變url 或 options.

/* eslint no-param-reassign:0 */

request.interceptors.request.use((url, options) => {

const { headers } = options;

options.headers = {

...headers,

Authorization: getToken(),

'X-XSRF-TOKEN': cookie.parse(document.cookie)['XSRF-TOKEN'],

};

return { url, options };

});

// response攔截器, 處理response

request.interceptors.response.use(response => {

/* eslint no-undef:0, valid-typeof:0 */

if (typeof phpdebugbar !== undefined) {

try {

const {

ajaxHandler: { headerName },

} = phpdebugbar;

const debugBarData = response.headers.get(headerName);

const debugBarId = response.headers.get(`${headerName}-id`);

if (debugBarData) {

const { id, data } = JSON.parse(decodeURIComponent(debugBarData));

phpdebugbar.addDataSet(data, id);

} else if (debugBarId && phpdebugbar.openHandler) {

phpdebugbar.loadDataSet(debugBarId, '(ajax)');

}

} catch (e) {

//

}

}

return response;

});

export default request;

本作品采用《CC 協(xié)議》，轉(zhuǎn)載必須注明作者和本文鏈接

總結(jié)

以上是生活随笔為你收集整理的Php+debugbar+api,react + Laravel Debugbar API 调试的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。