Advanced tutorial: Using Chrome DevTools to identify security and performance issues

Hey people,

With my new book The Ultimate Guide to Bubble Security coming soon, I’ve put together an article that details how to use Chrome DevTools to learn how Bubble loads assets and communicates with the server. We’ll have a look at:

  • What exactly Chrome Developer tools is and how to access it
  • How to identify what kind of assets a Bubble page is loading
  • How you can find and see the content of search results that Bubble sends to your browser
  • Inspecting the JavaScript files that keep Bubble running on your device, and what kind of information the code reveals (that you may not be aware of!) – it’s quite a bit!

You’ll find the Bubble and DevTools tutorial here, and the book will be available here when released!

Hope you find it helpful!

20 Likes

Seriously good stuff here! Thanks, Petter!

1 Like

Thanks Rico :slight_smile:

As usual @petter … awesome! Thank you!

1 Like

How soon will this book be published??

Beyond your new tutorial (thanks!) I’m hoping it will shed some light on all the weirdness I see in DevTools

@greg18

Like Bubble I’ve burned my fingers setting deadlines, so all I can say is “soon” unfortunately :slight_smile:

What kind of weirdness are we talking about? Maybe we can shed some light on it now?

For starters I would really appreciate a glossary of the code I see in DevTools. You’ve mentioned only a few in your tutorials, but I still don’t know what these mean:

start
mget
msearch
hi
__ LOOKUP __
bubble_session_uid
state_changes

Which of these codes represent when the client sends data to the server, and vice versa?

Next, you mention how DevTools shows the “editor names” of all elements, which I think are basically the “original” names of elements before I later changed their names, right? I cannot remember what the original names of my elements and data fields are, which makes debugging using DevTools challenging – is there an easy way to track those old names down?

Relatedly, I can see lots of Bubble objects in DevTools by the telltale 1642712720196xXXXXXXXXXXXXXXXXXX code…but I don’t know anything else about this object (i.e. its data type). How can I search my app for this object to see what it is?

And lastly, according to DevTools (and warnings from Bubble about excessive data transfer) my app seems to be transmitting the entire Current User’s object every 15 seconds (including their profile photo, which is triggering the large data usage warning). I have “Do every 60 second” workflows (not every 15) and they do not touch the User object, so I’m not sure what is causing this. You have mentioned that “information about the Current User is always loaded on page load” so I wonder, are User data types different from other data types in that all interactions between client and server which involve the User MUST transfer the entire User object (and not just the fields that are being modified)?

Perhaps relatedly, I have noticed that in my app if User A is viewing Page X (but not interacting or clicking anything), I can see (using DevTools) that whenever User B interacts with Page Y, some data is sent between User A’s device and the server – but this doesn’t make sense because there is no interaction between Users A and B and there is no relationship between Pages X and Y. What is going on??

Thank you as always for your help @petter!

I don’t think I’ll be able to provide a glossary, but on some of these I can provide some info.

mget and msearch are both part of the Elasticsearch API so those are used to perform searches and fetch data. MGet seems to trigger again if a Data Type changes (so any change you make to a data type anywhere else triggers an mget to get up-to-date information about the record on the page. So you can see multiple events even if you’re not really touching anything on the page.

The Bubble session_UID is the unique ID of the Current User (or the temporary current User if not logged in).

Next, you mention how DevTools shows the “editor names” of all elements, which I think are basically the “original” names of elements before I later changed their names, right?

No, I mean the name that you give it here. So for example, I named a text element “THIS IS MY NAME”, and the editor name of this is visible in the code:
CleanShot 2022-01-26 at 18.56.34@2x

Relatedly, I can see lots of Bubble objects in DevTools by the telltale 1642712720196xXXXXXXXXXXXXXXXXXX code…but I don’t know anything else about this object (i.e. its data type). How can I search my app for this object to see what it is?

It’s hard to say without the context. If you’re seeing it as part of network activity associated with a search for example, you’ll usually see the Data Type mentioned along with the UID:
CleanShot 2022-01-26 at 19.07.38@2x
In this case it’s a custom data type called Company.

And lastly, according to DevTools (and warnings from Bubble about excessive data transfer) my app seems to be transmitting the entire Current User’s object every 15 seconds (including their profile photo, which is triggering the large data usage warning). I have “Do every 60 second” workflows (not every 15) and they do not touch the User object, so I’m not sure what is causing this. You have mentioned that “information about the Current User is always loaded on page load” so I wonder, are User data types different from other data types in that all interactions between client and server which involve the User MUST transfer the entire User object (and not just the fields that are being modified)?

This too is difficult without the context. It can be useful to set up a blank page and do some testing there. I don’t see any reason for why your User would be reloaded every 15 seconds unless something’s happening in the database for example. Images on the user type is just a URL string, so that shouldn’t cause any excessive data load. Trying it out on a blank page can let you verify that, and try to pinpoint why it keeps reloading on the other page you’re testing (maybe a different workflow is making changes in the database in the backend for example, that forces Bubble to load the User info again and again). For the last part of your question, the User type is different in the sense that it’s loaded on page load no matter what you do, but all data types are downloaded in their entirety if loaded at all (minus empty fields or fields hidden by privacy rules). So there’s no partial loading of anything. This could explain the User data that keeps being reloaded in your app.

Perhaps relatedly, I have noticed that in my app if User A is viewing Page X (but not interacting or clicking anything), I can see (using DevTools) that whenever User B interacts with Page Y, some data is sent between User A’s device and the server – but this doesn’t make sense because there is no interaction between Users A and B and there is no relationship between Pages X and Y. What is going on??

This one too is hard to say as I don’t know what the interaction is. Again I would experiment on blank pages to see how isolated interactions cause some sort of network activity and try to decipher it from there. It’s helpful to clear the network log and then try to interact with the page. That way you’ll see only the network activity that occurred after the fact.

1 Like