Phoenix LiveView has a way to enable Profiling in the client side by just adding this into the
// app.js liveSocket.enableProfiling();
That will enable a log into your browser console such as:
toString diff (update): 1.224853515625 ms premorph container prep: 0.006103515625 ms morphdom: 397.676025390625 ms full patch complete: 411.117919921875 ms
In this case we can see that the
morphdom library is taking a considerable time to apply my DOM patches as my page has a huge html table full of data.
BTW, this function adds to 2 other very useful ones for debugging the client: