If you had a hidden APEX page item that you wanted to monitor you constantly had to go into the console and type in write out
console.log(...) to view its value. This can be annoying if the value will change multiple times as you test the page. Live Expressions (introduced in Chrome 70) resolves this issue by being able to track output by updating the value every 250 milliseconds.
The nice thing is that Live Expressions are preserved when you refresh a page. It’s hard to tell in the example above but I refreshed the page at one point.
Chrome DevTools have a lot of settings and features that you may not know about, let alone know where to access. Thankfully it has the Command Menu which is like Spotlight in MacOS. Anywhere in the DevTools type
Cmd+Shift+P (Windows users
Ctrl+Shift+P) to enable them. These shortcut keys are the same in Visual Studio Code so developers that use VSC will be very familiar with the behavior.
In the last part of the above demo I typed in
Cmd+P (Windows users
Ctrl+P). This will open a file that the webpage loaded or that you have in your workspace (shown below)
A long time ago I changed my editor to a dark theme. Since then a lot of applications (including APEX 19.1 and MacOS Mojave) support dark themes. Chrome DevTools now supports dark mode.
A lot of times when doing basic UI / CSS debugging you may inspect an element and modify its CSS properties. When you refresh the page you lose all your changes. This is especially frustrating if doing live-CSS edits with end users to do quick proof of concepts.
You can persist CSS changes using the Chrome Overrides feature. To enable this go to
Sources > Overrides > + to add a folder. This can be any empty folder you want.
When you do this you’ll get the following warning message. Be sure to
Allow Chrome to access the folder. You’ll only need to do this setup once.
Now when you modify a CSS property and refresh the page it’ll persist even after you reload the page:
If you want to quickly reset all the changes you’ve made just delete everything in your
They’re various ways to add breakpoints to help you debug. Sometimes you know exactly where in you JS code you want to add breakpoints but don’t want to manage it via the UI. In this case you can add breakpoints directly in your code by adding the
This won’t exactly help you with your APEX development, nor is it a DevTool feature. If you’re ever offline and really bored Chrome’s got you covered. Simply hit the
spacebar when you see the dinosaur to start and use the
down arrows to move it around.