Comments (9)
I was also having issues with the click events not working with If you create the after_request before the toolbar extension it will see the html mimetype and work without needing future changes. Here's an extension I wrote for this in my app.
"""Flask Extensions"""
import flask
import flask_debugtoolbar
class DevToolbar:
"""Add debug toolbars with json to html
Note you must pass `_debug` param to convert the json response
"""
def __init__(self, app):
wrap_json = """
<html>
<head>
<title>Debugging JSON Response</title>
</head>
<body>
<h1>Wrapped JSON Response</h1>
<h2>HTTP Code</h2>
<pre>{{ http_code }}</pre>
<h2>JSON Response</h2>
<pre>{{ response }}</pre>
</body>
</html>
"""
@app.after_request
def after_request(response):
if response.mimetype == "application/json" and \
'_debug' in flask.request.args:
html_wrapped_response = flask.make_response(
flask.render_template_string(
wrap_json,
response=response.data.decode("utf-8"),
http_code=response.status
),
response.status_code,
)
return app.process_response(html_wrapped_response)
return response
flask_debugtoolbar.DebugToolbarExtension(app)
from flask-debugtoolbar.
Workaround:
@app.after_request
def after_request(response):
# Wrap JSON responses by HTML and ask flask-debugtoolbar to inject own HTML into it
if app.config.get("DEBUG_TB_ENABLED", False) and response.mimetype == "application/json" and response.status_code != 401:
response.direct_passthrough = False # Work-around for profiling of streamed JSON data download
args = dict(response=response.data.decode("utf-8"), http_code=response.status)
html_wrapped_response = make_response(render_template("wrap_json.html", **args), response.status_code)
response = app.extensions["debugtoolbar"].process_response(html_wrapped_response)
return response
and
<html>
<head>
<title>JSON Response</title>
</head>
<body>
<h1>HTML Wrapper for JSON Response</h1>
<h2>HTTP Code</h2>
<pre>{{ http_code }}</pre>
<h2>JSON Response</h2>
<pre>{{ response }}</pre>
</body>
</html>
from flask-debugtoolbar.
Jef did you have any luck getting this done?
from flask-debugtoolbar.
No. The way to do it I think, so you don't have to get funky with adding a HTML wrapper around the JSON is detect the content type and have the toolbar append its own bit of JSON with the sqlalchemy queries + page timing info, but thats still a pain methinks compared to just manually setting sqlalchemy to echo queries to stdout and watching your logs as you hit various endpoints.
from flask-debugtoolbar.
Thanks Jeff.
from flask-debugtoolbar.
I also had to init the FDT like the following to make the above snippet work instead of just
DebugToolbarExtension(app)
app.extensions = getattr(app, 'extensions', {})
app.extensions['debugtoolbar'] = DebugToolbarExtension(app)
from flask-debugtoolbar.
@sarimak I add code exactly as yours, the toolbar show up on the page, but nothing pop up when click the menus.
I compared all the requests to the example in the source, there are two toolbar.css requests send to server, the rest requests are totally same.
from flask-debugtoolbar.
@guyecode You're right, FDT has changed since I posted the workaround. I can reproduce the issue (FDT for JSON response is displayed but ignores click events -- while it works fine for HTML response) with the following code:
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.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)
return response
@app.route('/json')
def test_json():
return flask.jsonify(dict(key1='value1')), 200
@app.route('/html')
def test_html():
return '<head/><body>test</body>', 200
if __name__ == '__main__':
app.run(debug=True)
Unfortunately, I am not skilled enough in JavaScript to troubleshoot the issue.
from flask-debugtoolbar.
modify wrap_json.html to:
<html>
<head>
<title>JSON Response</title>
</head>
<body>
<h1>HTML Wrapper for JSON Response</h1>
<h2>HTTP Code</h2>
<pre>{{ http_code }}</pre>
<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>
from flask-debugtoolbar.
Related Issues (20)
- Drop support for python 2 HOT 1
- Subdomains support HOT 2
- quickstart broken link
- Not working for subdmains - blocked by chrome/firefox because of http instead of https HOT 2
- '_request_ctx_stack' is deprecated and will be removed in Flask 2.3 HOT 3
- Breaks with Flask 2.3.0 (okay with 2.3.1) HOT 1
- Scrollbar not appearing HOT 1
- More help with reviewers/committers/maintainers? HOT 3
- flask-debugtoolbar is incompatible with newest version of werkzeug. HOT 2
- 0.13.1 breaks with Flask 3.0: ImportError: cannot import name '_request_ctx_stack' from 'flask.globals HOT 7
- 0.13.1 breaks on werkzeug 3: Response' object has no attribute 'charset HOT 1
- Drop support for Flask < 2.2.0 (and implicitly Python < 3.7) HOT 2
- Add a basic integration test that ensures the python package is installable HOT 5
- ReadTheDocs builds are broken HOT 2
- Address Flask 3.0 deprecation warnings on using __version__ (to be removed in Flask 3.1) HOT 2
- sql_select/sql_explain not working with Flask-SQLAlchemy 3 & SQLAlchemy 2 HOT 1
- SQLAlchemy 0 queries on swagger
- Update Codemirror files
- New release HOT 4
- NameError: 'debug_enables_record_queries' on visiting Flask routes when toolbar enabled HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from flask-debugtoolbar.