Develop Reference

How to monitor or profile DOM updates in Chrome or Firefox?

I have an application (built on React) that seems to be causing more overhead -- likely DOM updates -- than it should. Normally when a user enters any data, e.g. a single character, a DOM update would occur, but a denounce has been implemented so this shouldn't happen, though perhaps the debounce itself is problematic.
While I could devise some visual ways to diagnose this, I thought it might be useful to collect profiling data, in particular, something like a histogram or graph of DOM updates per second sounds useful.
I don't mind using either Firefox or Chrome to do the profiling, but I will note as an aside that Firefox seems to be hit even harder than Chrome by this performance issue.

Honestly, the best browser is Microsoft Edge Dev. Here is a link to the download page. Edge Dev a bunch of extra options, under the Settings wheel, and turn on all the extra ones that you may need. There are 3 options but like I said I suggest Dev. It has a feature (3-D View) that enables you to see all the elements on the page and how they are stack/interacting with each other, plus you can change it to DOM View if that helps. It allows you to move around and interact with the 3-D model and it will show above what it's actually doing. It is a great way to "See" your page. You can also download Firefox Developer Edition which has Dev tools too, but not like Edge. Run your program in an Edge browser, right-click and Inspect the page, it is easier if you un-dock the console. Change the settings to fit your needs and then click the Profile Tab. You should be able to run it through there and get results. Look around in the Inspect window and the Console Tab, which will log errors and details if you choose those options, that may tell you if there is some request that is holding things up.

Prevent Chrome 80 from freezing tab with my page

I have a simple html page that displays some monitoring results, it reloads every 2 minutes and makes noise when those results are not acceptable. I keep this page open 24/7, so new Chrome started freezing and suspending it, as I found out via chrome://discards/ .. So the page stopped making noise and catching my attention, mostly cause the tab gets frozen by Chrome. That happens if I forget to leave the tab with this page active, "on top". Is there a rather simple way to prevent Chrome from freezing the tab, even if it is not active? I could involve some Javascript, if needed..
I am aware that there is a simple solution of opening new window with this page and leaving it alone. On the other hand, I made the page, so I can make changes to HTML in order to ensure that page remains unfrozen. I tried updating title with current time on every reload, this visibly helped, page seemingly always has fresh time in the title, but it still doesn't make noise. And if I switch into it when noise is supposed to happen, - it starts the sound half way like it was trying to all alone.. it's even funny..
Is there any simple solution to this? Thanks for your help.

periodically reload tab and bring to front

I have a requirement where a few users are required to keep a watch over a dashboard browser page.
My first thought was use some javascript magic that reloads the page, switches to it if it is not active and being the browser window to front. I quickly realized how difficult this (accept for reload) is and that browsers do everything possible to prevent it, with good reason.
On the other hand, I have err, seen some "websites" which show a pop-up telling me that my browser is affected and I need to call the given 800 number. These pop-ups are pretty much impossible to kill. I could use that if I knew how.
I have also considered utilities like ergociser which sit in the taskbar and open a browser window periodically. This could work but it opens a new pop-up window every time, while I am keen to reload it in the same window.
The closest I have come so far is to use alert which does not bring the window to front but it does flash the taskbar.
I am thinking of a chrome extension or firefox add-on that brings named pop-up tab. But I am open to any other ideas. It can be a browser specific solution, and it is ok to require white-listing in pop-up blockers
What is a best way to do this?
UPDATE
There are two close votes for "Too Broad". It is true that I am looking for the right technology to use for this problem, so I cannot refine it with technology-specific details. But short of that, appreciate if someone can give suggestion for narrowing down the problem statement.

How can I debug "Back Navigation Caching" in IE?

I'm seeing an odd bug in IE that I'm not seeing in Chrome. Specifically, this involves some JS code not firing when a (Telerik) wizard is navigated back to it's first step.
When the user clicks their "Previous" button, some data isn't being properly loaded. Hitting F12 and bringing up the developer console has shown me the following Warning:
DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337
Ok, so I go to the link provided and I noticed the documentation states:
In order to be cached, webpages must meet these conditions:
...
- The F12 Developer tools window isn't open
This is a problem, because when I use the navigation buttons within my wizard WHILE the dev window is open, it behaves properly, just as it does in Chrome.
How can I debug my related Javascript so I can figure out what's going on? Also, I understand what caching is but I'm not exactly sure what this is about and I have no idea why Chrome behaves differently. Is there a way that I can force IE to behave like chrome and cut on (or off) whatever features that are causing this issue?

Yuck. Back to old school debugging for you.
Short of putting the whole browser into a Windows debugger, you can pretty much forget about setting breakpoints. All you can do is log.
If you are lucky and your problem isn't too deep, you can use a sprinkling of simple alert() statements to let you know the state of things at various stages in your code. One nice thing is that you can serialize objects now pretty nicely; for example, you can do JSON.stringify(this), which will probably give you a giant output, which you can copy and paste into your IDE and unpack. A major upside to doing this is that the alert will block, so you can take your time studying the output. A major downside to this is that race conditions are now much more likely.
Alternatively, you can add a <textarea> to the page and throw your JSON.stringify(this) results into that. Because this means extra DOM mutations, it also increases the odds of race conditions, but not by much. (If race conditions are a possibility, you can do this:
(function () {
var currentState = JSON.stringify(this);
setTimeout(function () {
document.querySelector('textarea').value = currentState;
}, 1000);
})()
Even though these are now asynchronous, if you use this multiple times in sequence, these will execute in that same sequence (unless you change the timeout period).
If you are doing actual page navigations (and not just changing the URL with pushState()), then actually reading those logs is going to be a problem. The solution is to put the page in a frame and write the content out to a sibling frame. As long as both frames are running on the same domain, you will have no problem pushing the data into the sibling frame. If you can't put them on the same domain, you are kind of screwed.

Chrome to read when window is focused,aka opened

I am still fairly new at programing. I have played around with JavaScript before, but it is still tricky for me.
I got this great idea for an extension for Google Chrome- in the future it would be nice to port it into other browsers. For now I think Google Chrome would be the easiest way to develop for.
I investigated a little and finished the kitties tutorial on the extensions site.
From there it makes sense- easy for the most part, but my idea sounds impossible to me. Simply, the extension would automatically reload the browser when window is selected or focused on the screen. Saves time by not pressing Ctrl+R (PC), or Cmd+R (Mac), or reload button every time the developer checks an update on code.
I was reading through the API documentation and found the method
chrome.browserAction.onClick, is there like chrome.browserAction.focused? Is this idea even feasible?
I also have to take in consideration that Chrome is visited by multiple OS. I wonder if Mac OS, Linux, and Windows version need different JavaScript instruction to pull this off? This simple idea is overwhelming...
Thanks for input in advance :)

Sounds like you'll want to use chrome.windows.onFocusChanged:
Fired when the currently focused window changes. Will be chrome.windows.WINDOW_ID_NONE if all chrome windows have lost focus. Note: On some Linux window managers, WINDOW_ID_NONE will always be sent immediately preceding a switch from one chrome window to another.
Here's an example of how to reload a newly-focused window's active tab:
chrome.windows.onFocusChanged.addListener(function(windowId) {
if (windowId != chrome.windows.WINDOW_ID_NONE) {
chrome.tabs.query({ active:true, windowId:windowId }, function(tabs) {
if (tabs.length == 1) {
var tab = tabs[0];
chrome.tabs.reload(tab.id);
}
});
}
});
You'll also need to declare the tabs permission in your manifest.