Community Tip - Dr.FLARE debug tool for Cloudflare (Chrome Extension)

Download Link

Introduction

This tool was built to be a visually intuitive way to see the benefits of using Cloudflare. The Dr.FLARE plugin can also be used by anyone that needs a quick way to examine a website to identify opportunities for improvement!

How to Use

  1. Install the extension.
  2. Open Developer Tools.
  3. Go to the Dr.FLARE panel.
  4. Once the panel is ready, refresh!
  5. The color will not change if you don’t have the Developer Tools opened.
  6. The extension popup has the option to turn off the color change.

Features

Image Painting

The extension uses CSS color filter to paint images on a site, providing an intuitive way to tell whether images are coming from Cloudflare cache(hit) or the origin(miss).

Legend for each color

  • Green: Image was delivered via Cloudflare and got HIT
  • Red: Image was delivered via Cloudflare and cache MISS
  • Black: Image was delivered from non-Cloudflare domain

Here is another example for a third-party site (non-Cloudflare), the images will be painted black.

Hover on images to see more details about the image and Cloudflare features.

The above example shows the images were delivered via Cloudflare Railgun and got MISS.

You can disable the Image Painting from the extension popup, please note that this will require a refresh to apply.

17

This was a challenging feature to implement due to limitations in the Chrome API and different ways of DOM implementation. We’re happy with what was accomplished, and so far it works really well. We’re looking to improve this feature, if you encounter any issue or error with this, please let us know.

Dashboard

In Chrome Developer Tools, find the “Dr.FLARE” panel. When the panel is ready, refresh the page you’re browsing.

This dashboard updates its data when the page triggers the on-load event and will continue updating the information as it receives a new request from the network panel. Each graph / number should be easy to understand, for more details, hover on the graphs to see help message - popup.

  • BYTES SAVED BY CACHE: Cloudflare Cache HIT (bytes) / Total Bytes - including non-Cloudflare requests.
  • Routed Datacenters: If there are multiple data centers (most likely not), it will stack on top of the graph.
  • TTFB items: It uses “waiting” time in Chrome Network Request, averages out for Cache HIT request, MISS and non-Cloudflare.
  • Format Converted: Image Polished doesn’t always change the image format, it shows the number of requests that were actually changed its format. (jpg → webp)
  • “:” in HTTP Versions: There could be requests were blocked by the browser, it shows “:” for those requests.
  • CONNECTIONS USED: Chrome has the unique id for each connection, it counts the number of unique connections used for requests.

Each tab will have more detailed information on each category. If the feature wasn’t applied for the site, the number next to the category will remain gray. Green indicates there were “Cached” requests, for example in the screenshot above, and the number of requests was 54.

Object Tables

Categories

There are object tables for each category.

  • Cached Requests: shows the list of Cloudflare cached requests.
  • Uncached Requests: shows the list of Cloudflare cache MISS requests.
  • Non-Cloudflare: shows the list of 3rd party objects
  • Image Polish: shows the list of image polish applied objects
  • Railgun: shows the list of Railguned requests
  • Image Resizer: shows the list of Image Resized requests
  • All Requests: shows all objects in the site.

Each category tab will have different information on the top of the table to show relevant information for each feature.

Table Feature

We used dataTable plugin for this, so you can search / sort / adjust number of rows which comes with the plugin. You can also click each row to see additional information.


Image Polish / Auto-Minify provides the % of byte savings - easy to tell how much benefits you’re getting from those features.

The All Requests tab provides an easy way to tell which features are being applied for each object. It will enable the “green switch” if it was applied.


For Railgun, it shows whether the object was delivered via “Direct” or “Listener”

For TTFB, we’re using “waiting” time on Chrome for each object.

Image Resizer shows the internal Status and the processing time.


Lastly, not only you can search for data using the search box on the right top of the table, but you can also highlight search items by cmd + F (Control + F) - this doesn’t come by default in the development tool panel. :frowning_face:

CDN-CGI Trace

This is just to show cdn-cgi/trace information. Click “Update” if the information needs to be refreshed.

Future Updates

We will be updating the tool as we have more information on use and what you’d like. We have a couple ideas, but would love your feedback & ideas!

This is a Cloudflare Community Tip, to review other tips, click here.

Çevirmek…traduzir…翻译…traducir…Traduire…Übersetzen…:greyg: Translate this Tip.

4 Likes