sodapopcan
Access phoenix.js from Chrome devtools
I’m working through Function Web Development with Elixir, OTP, and Phoenix which is a really eye-opening, fantastic book.
Of course, it’s a little out of date. It was written when Brunch was still bundled with Phoenix but now we have Webpack, so when instructed to type var phoenix = require("phoenix") in dev tools, that just doesn’t work.
I’ve searched for importing webpacked modules in dev tools to no avail. Perhaps I’m just tired—I’ve been working at this for hours now—but is there a way to access phoenix.js in Chrome’s dev tools in 1.5?
Thanks!
Marked As Solved
dorgan
To access something from the devtools, it needs to be globally accessible
One way of doing it is by assigning it to the window object, for example:
import phoenix from "phoenix";
window["phoenix"] = phoenix;
Then in the devtools you can now access it as phoenix. It should work regardless of the build tool you’re using.
Generally, importing a library with a script tag pointing to the file(like https://www.unpkg.com/phoenix@1.5.4/assets/js/phoenix.js) works too, but I don’t know if it does for phoenix too
Also Liked
lance
Hey @sodapopcan,
Welcome!
No worries about @'ing me. 
I’m so glad you found the book useful. It’s always great to hear when your work has helped other folks!
I don’t have immediate plans for a second edition, though the thought has crossed my mind. Books are a big undertaking, and I would want to make sure I’ve got the spare cycles to complete the job before I took it on.
For now, let’s just say the idea is simmering rather than at a full boil.
Cheers!
Last Post!
sodapopcan
Thanks for the welcome and thanks for the response! (I have been offline for several days here)
Cheers
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Producing high quality Elixir screencasts since 2017.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #security
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Practical resources that improve the lives of professional developers.
Develop your skills with books, videos, and courses.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"