使用flask-debugtoolbar调试flask页面或者flask api接口

2020-12-14 02:41:12 编辑 0 阅读量:457

Flask-DebugToolbar 是另一个非常了不起的调试工具。在debug模式下，它会把一个侧边栏置于你的应用程序的每一页上。侧边栏提供了有关 SQL 查询，日志记录，版本，模板，配置，性能和其它有趣的信息，使得更容易地跟踪问题。使用如下：

## 安装
`$ pip install Flask-DebugToolbar`

## 调试html的页面
这里的页面只要是拥有`<body></body>`格式就可以
建立一个`test.py`的app：
```
$ vim test.py
import flask
import flask_debugtoolbar

app = flask.Flask('test', template_folder='.')
app.config['DEBUG_TB_ENABLED'] = True
app.config['SECRET_KEY'] = '123'
toolbar = flask_debugtoolbar.DebugToolbarExtension(app)

@app.route('/')
def test_html():
    return '<body>test</body>', 200

if __name__ == '__main__':
    app.run(host="0.0.0.0", port=5001, debug=True)
```
之后只要访问`localhost:5001`页面就可以看到右边栏有调试信息：
![](https://cblog.xyz/media/2018/05/TIM截图20180510123044.png)

## 调试api接口
这里的api接口包括RESTful 接口等，格式为json，总的方法是，判断response返回是否为json格式，如果是就渲染成html的形式，可以不修改原接口：
- 创建一个template

```
$ vim wrap_json.html
<html>
    <head>
        <title>JSON Response</title>
		<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.7.min.js"></script>
    </head>

<body>
        <h1>HTML Wrapper for JSON Response</h1>

<h2>JSON Response</h2>
        <pre>{{ response }}</pre>
    </body>
<script>
<-- 如果发现右边栏不能点击就删除这个函数 -->
$('#flDebugPanelList').find('li a').click(function () {
    const current = $('#flDebug #' + this.className + '-content');
    if (current.is(':visible')) {
      $(document).trigger('close.flDebug');
      $(this).parent().removeClass('active');
    } else {
      $('.panelContent').hide();
      current.show();

$('#flDebugToolbar').find('li').removeClass('active');
      $(this).parent().addClass('active');
    }
  });
</script>
</html>

```

- 建立一个app

```
$ vim test.py
import flask
import flask_debugtoolbar

app = flask.Flask('test', template_folder='.')
app.config['DEBUG_TB_ENABLED'] = True
app.config['SECRET_KEY'] = '123'
toolbar = flask_debugtoolbar.DebugToolbarExtension(app)

# 渲染json为html
@app.after_request
def after_request(response):
    if response.mimetype == "application/json":
        html_wrapped_response = flask.make_response(flask.render_template(
            "wrap_json.html", response=response.data.decode("utf-8"), http_code=response.status), response.status_code)
        return toolbar.process_response(html_wrapped_response)  # 手动调用toolbar

return response

@app.route('/')
def test_json():
    return flask.jsonify(dict(key1='value1')), 200

## 添加其他的调试面板
#### 添加mongodb的调试面板
Flask-DebugToolbar自带sqlalchemy的调试面板，如果想要看mongodb的调试信息，可以很简单的添加：
```
$ pip install MongoEngine   # 类似与sqlalchemy的工具，用于mongodb
```
然后再修改Flask-Debugtoolbar的panels：
```
panels = list(app.config["DEBUG_TB_PANELS"])
panels.append("flask.ext.mongoengine.panels.MongoDebugPanel")
app.config["DEBUG_TB_PANELS"] = panels
```
完整代码如下：
```
$ vim test.py
import flask
import flask_debugtoolbar

app = flask.Flask('test', template_folder='.')
app.config['DEBUG_TB_ENABLED'] = True
app.config['SECRET_KEY'] = '123'
toolbar = flask_debugtoolbar.DebugToolbarExtension(app)  # 初始化时会自动设置很多变量的值,比如:app.config["DBUG_TB_PANELS"]
panels = list(app.config["DEBUG_TB_PANELS"])  # 如果在初始化之前会保存无此变量
panels.append("flask.ext.mongoengine.panels.MongoDebugPanel")
app.config["DEBUG_TB_PANELS"] = panels

@app.route('/')
def test_html():
    return '<body>test</body>', 200

if __name__ == '__main__':
    app.run(host="0.0.0.0", port=5001, debug=True)
```
![](https://cblog.xyz/media/2018/05/TIM截图20180514154239.png)

#### 添加elasticsearch的调试面板
步骤和mongodb的类似
```
$ pip install flask-debugtb-elasticsearch  # 安装依赖包

############ 修改配置 ##############
panels = list(app.config["DEBUG_TB_PANELS"])
panels.append("flask_debugtb_elasticsearch.panel.ElasticsearchDebugPanel")
app.config["DEBUG_TB_PANELS"] = panels
```
![](https://cblog.xyz/media/2018/05/TIM截图20180514154319.png)

## 其他
- 如果要查看性能情况，则在app.config加上配置：`app.config["DEBUG_TB_PROFILER_ENABLED"] = True`

---
参考：
- [1][Add option to enable the toolbar to display on JSON responses? #89](https://github.com/mgood/flask-debugtoolbar/issues/89)

使用flask-debugtoolbar调试flask页面或者flask api接口

附件: