Inspecting LiveView pay loads in DevTools?

[Twfo326]

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

[Nicd]

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

[Twfo326]

Solved. Thanks for the explanation and screenshot.

[pablodavila]

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.