Inspecting LiveView pay loads in DevTools?

I’m working my way through Programming Phoenix LiveView as a programming beginner.

From chapter 1’s guessing game, I have a working LiveView app on “localhost:4000”. When I click on any of the links being handled by “phx-click”, I’m expecting to get data regarding the request/response under Network/websockets tab but it remains empty.

A page refresh populates the tab with the initial get request 101’s, but doesn’t update itself when clicking the LiveView links.

Browsers used: Firefox and Brave

Click on the websocket request and select the correct tab. On Firefox it’s called “Response”, on Chrome based browsers it’s “Messages”.


Solved. Thanks for the explanation and screenshot.

You can also set window.liveSocket = liveSocket; in your app.js and then call liveSocket.enableDebug(); in the browser’s console.

That way you can see the updates in the console too.