{"id":13393222,"url":"https://github.com/kagux/ex_debug_toolbar","last_synced_at":"2025-04-12T19:43:59.180Z","repository":{"id":20607764,"uuid":"90412289","full_name":"kagux/ex_debug_toolbar","owner":"kagux","description":"A debug web toolbar for Phoenix projects to display all sorts of information about request","archived":false,"fork":false,"pushed_at":"2022-01-19T22:36:20.000Z","size":8345,"stargazers_count":405,"open_issues_count":6,"forks_count":11,"subscribers_count":16,"default_branch":"master","last_synced_at":"2024-04-13T18:22:16.684Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://hex.pm/packages/ex_debug_toolbar","language":"Elixir","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kagux.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-05T20:04:42.000Z","updated_at":"2024-04-07T08:33:33.000Z","dependencies_parsed_at":"2022-08-07T09:16:11.388Z","dependency_job_id":null,"html_url":"https://github.com/kagux/ex_debug_toolbar","commit_stats":null,"previous_names":[],"tags_count":43,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kagux%2Fex_debug_toolbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kagux%2Fex_debug_toolbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kagux%2Fex_debug_toolbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kagux%2Fex_debug_toolbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kagux","download_url":"https://codeload.github.com/kagux/ex_debug_toolbar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248625479,"owners_count":21135512,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T17:00:46.700Z","updated_at":"2025-04-12T19:43:59.133Z","avatar_url":"https://github.com/kagux.png","language":"Elixir","funding_links":[],"categories":["Debugging","Elixir"],"sub_categories":[],"readme":"[![Travis](https://img.shields.io/travis/kagux/ex_debug_toolbar.svg)](https://travis-ci.org/kagux/ex_debug_toolbar)\n[![Hex.pm](https://img.shields.io/hexpm/v/ex_debug_toolbar.svg)](https://hex.pm/packages/ex_debug_toolbar)\n\nA toolbar for Phoenix projects to display all sorts of information\nabout current and previous requests: logs, timelines, database queries etc.\n\nProject is in its early stages and under active development.\nContributions to code, feedback and suggestions will be much appreciated!\n\n\n![Screencapture](screenshots/toolbar.gif)\n\n# Recent changes\n  ### Version 0.5.0\n   * _(new)_ phoenix 1.3\n   * _(new)_ support bootstrap 4\n  ### Version 0.4.0\n   * _(new)_ requests history panel\n   * _(new)_ support Slim templates (`phoenix_slim` package)\n   * _(new)_ `debug` config key to enable to verbose logs\n   * _(new)_ `ignore_paths` config key to skip tracking certain requests by paths\n   * _(improved)_ breakpoints no longer use distribution code\n\n\n# Features\nToolbar is built with development environment in mind. It's up to you to enable or disable it in configuration.\nCalls to toolbar functions such as `Toolbar.pry` are no-op when it is disabled.\n\nAfter enabling the toolbar, it automatically injects itself at the bottom of html pages.\nSome panels on the toolbar are optional and only appear when relevant data is available (ecto queries, for example).\n![Toolbar](screenshots/toolbar.png)\n\nLet's take a look at available panels:\n\n### Timings\nIt shows overall time spent rendering current controller as reported by Phoenix instrumentation.\nIn addition, it provides aggregated stats for each template.\n![Timings](screenshots/timings.png)\n\n### History\nA list of previous request.\n![History](screenshots/history.png)\nClicking on historical request loads it into toolbar so you can inspect it closer.\n![History Loaded](screenshots/history_loaded.png)\n\n### Connection details\nSurfaces information from `conn` struct of current request.\n![Connection Details](screenshots/conn_details.png)\n\n### Logs \nLog entries relevant to current request only\n![Logs](screenshots/logs.png)\n\n### Ecto queries\nA list of executed ecto queries including parallel preloads when possible.\n![Ecto Queries](screenshots/ecto_queries.png)\n\n### Breakpoints\nThink of having multiply `IEx.pry` breakpoints available on demand right from the toolbar.\nNote, unlike `IEx.pry`, this does not interfere with execution flow of phoenix server.\n\nUsage is similar to `IEx`.\nDrop `require ExDebugToolbar; ExDebugToolbar.pry` in a file you'd like to debug\nand breakpoint will appear in this panel. Breakpoints are capped at configurable number per \nrequest (10 by default).\n![Breakpoints](screenshots/breakpoints.png)\n\nA click on any breakpoint will take you to familiar `iex` session with context as it was at execution time.\n![Breakpoint Sesssion](screenshots/breakpoint_session.png)\n\n\n# Installation\n  1. Add `ex_debug_toolbar` to your list of dependencies in `mix.exs`:\n\n   ```elixir\n   def deps do\n     [{:ex_debug_toolbar, \"~\u003e 0.4.0\"}]\n   end\n   ```\n\n  2. Ensure `:ex_debug_toolbar` is started before your application:\n\n   ```elixir\n   def application do\n     [applications: [:ex_debug_toolbar, :logger]]\n   end\n   ```\n\n  2. Add `ExDebugToolbar.Phoenix` to your endpoint in `lib/my_app/endpoint.ex`\n\n  ```elixir\n    defmodule MyApp.Endpoint do\n      use Phoenix.Endpoint, otp_app: :my_app\n      use ExDebugToolbar.Phoenix\n      ...\n    end\n  ```\n\n  3. Enable toolbar in config `config/dev.exs` and setup collectors. Replace `:my_app` and `MyApp` with your application name\n\n     _Note_: Slim templates support requires [phoenix_slime](https://github.com/slime-lang/phoenix_slime) package\n\n  ```elixir\n    # ExDebugToolbar config\n    config :ex_debug_toolbar,\n      enable: true\n\n    config :my_app, MyApp.Endpoint,\n      instrumenters: [ExDebugToolbar.Collector.InstrumentationCollector]\n\n    config :my_app, MyApp.Repo,\n      loggers: [ExDebugToolbar.Collector.EctoCollector, Ecto.LogEntry]\n\n    config :phoenix, :template_engines,\n      eex: ExDebugToolbar.Template.EExEngine,\n      exs: ExDebugToolbar.Template.ExsEngine,\n      #slim: ExDebugToolbar.Template.SlimEngine,\n      #slime: ExDebugToolbar.Template.SlimEngine\n\n  ```\n\n  4. To display parallel Ecto preloads you have to use `master` branch\n  ```elixir\n    defp deps do\n      [\n       {:ecto, github: \"elixir-ecto/ecto\", branch: \"master\", override: true}\n      ]\n    end\n  ```\n\n# Configuration\n\nTo change configuration, update `:ex_debug_toolbar` config key in your `config/dev.exs`. For example: \n```elixir\n    config :ex_debug_toolbar,\n      enable: true\n```\n\n### Available options:\n\n| Option             | Values  | Default                                                                                      | Description                                                                                                         |\n|--------------------|---------|----------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------|\n| enable             | boolean | false                                                                                        | Enable/disable toolbar. When disabled, toolbar code is not injected in page and toolbar functions are mostly no-op. |\n| iex_shell          | string  | \"/bin/sh\"                                                                                    | Shell executable to be used for breakpoint session                                                                  |\n| iex_shell_cmd      | string  | \"stty echo; clear; iex -S mix breakpoint.client --breakpoint-file %{breakpoint_file}\"        | Shell command to launch breakpoint iex session. `%{breakpoint_file}` is a placeholder for tmp file with data        |\n| breakpoints_limit  | integer | 10                                                                                           | Maximum number of breakpoints per request. After reaching this cap, new breakpoints will be ignored                 |\n| remove_glob_params | boolean | true                                                                                         | `Plug.Router` adds `glob` params to `conn.params` and `conn.path_params` on `forward`. This option removes them     |\n| ignore_paths       | list    | [~r{^/images/}, ~r{^/css/}, ~r{^/js/}, ~r{^/phoenix/live_reload/}]                           | A list of paths that should not be recorded by toolbar. Each item can be either string for exact match or a Regex.  |\n| debug              | boolean | false                                                                                        | Toggles debug logs. Requires recompilation for some logs                                                            |\n\n\n# Troubleshooting\n\n### Poison encode issues\n\nIf you see `poison` encode related errors in your logs:\n* update to latest `poison` package version\n* enable debug mode and open an issue with detailed logs\n\n### Debug mode\n\nWhen enabled, toolbar prints debug logs.\nThis information is very helpful for issues with encoding, missing requests, etc.\n\nTurn on debug mode\n\n```elixir\n    config :ex_debug_toolbar,\n      enable: true,\n      debug: true\n```\n\nTurn off `Logger` log truncation and put it into `debug` level\n\n```elixir\n    config :logger,\n      level: :debug,\n      truncate: :infinity\n```\n\nRecompile toolbar to see channel logs\n\n```\n    mix deps.compile ex_debug_toolbar --force\n```\n\n\n# Contributors\nSpecial thanks goes to [Juan Peri](https://github.com/epilgrim)!\n\n# Contribution\n  Contributions in the form of bug reports, pull requests, or thoughtful discussions in the GitHub issue tracker are welcome!\n\n# TODO\n- [ ] Toolbar panels\n  - [ ] Messages output panel (Toolbar.inspect and Toolbar.puts)\n  - [ ] System info panel (versions, vm info, etc)\n  - [ ] Help/Docs Panel (links to dev resources)\n  - [ ] Request time panel\n    - [ ] Request history (historical graphs?)\n    - [ ] Visualize timeline\n  - [ ] Ajax requests panel\n  - [ ] Channels info panel\n  - [ ] Visualize gettext\n- [ ] Toolbar API\n  - [ ] Decorator for functions to time them\n  - [ ] Add metadata to events and use groupable names (template.render, controller.render etc)\n- [ ] Tests\n  - [ ] breakpoints\n    - [ ] client test\n    - [ ] terminal test\n- [ ] Simple installer mix task\n- [ ] Upgrade to Phoenix 1.3\n- [ ] Elm/React instead of jquery?\n\n## Demo App\n  Use [demo app](https://github.com/kagux/ex_debug_toolbar_demo) to simplify development process.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkagux%2Fex_debug_toolbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkagux%2Fex_debug_toolbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkagux%2Fex_debug_toolbar/lists"}