I have a web page that refreshes constantly, where a span have a number that is changing (decreasing).
Is there a way using JS for example to automatically focus the browser tab containing the web page when that number reaches less than 10 so that the supervisor takes action before hitting 0 without knowing?
Thanks.
This is not possible.
There's two possible solutions.
Browser extension. This will give you a lot more leeway and control.
And this has become a lot more popular is to change the favicon on the page to another one that looks like an alert. And changing the title too. Playing a sound is another cue to the user that something has happened.
Hope this helps!
Depending on the browser and the user’s settings, alert might take the user to the tab that opened the alert. In other browsers alert might only change the tab icon to stand out.
Firefox gives the user the option to enable this behavior with a “Allow dialogs from example.com to take you to their tab” checkbox, unchecked by default:
Chrome doesn’t give the user any such option, but does mark the tab with an orange indicator:
You can test your browser’s behavior by running this snippet and then switching to another tab:
setTimeout(function() {
alert('this is a delayed alert');
}, 3*1000);
I have a button which is calling a function that displays an alert. The alert is displayed but if I change the messege that the alert is showing, when I press the button the alert will still show the first message I wrote and not the updated one.
It is also happening when I add html tags, they won't show when I run the code.
Why is this happening?
You know the drill: make some edits to your document, click save, switch over to your browser, refresh it, and then observe the changes.
However, every now and again I will catch myself viewing the wrong site page, viewing the site on a different browser, or viewing the client's old live site! Check your address bar + go into your folder and open the page again.
How can I inspect an element which disappears when my mouse moves away?
I don't know it's ID, class or anything but want to inspect it.
Solutions I have tried:
Run jQuery selector inside console $('*:contains("some text")') but didn't have any luck mainly because the element is not hidden but probably removed from the DOM tree.
Manually inspecting DOM tree for changes gives me nothing as it seems to be just too fast to notice what have changed.
SUCCESS:
I have been successful with Event breakpoints. Specifically - mousedown in my case. Just go to Sources-> Event Listener Breakpoints-> Mouse-> mousedown in Chrome. After that I clicked the element I wanted to inspect and inside Scope Variables I saw some useful directions.
(This answer only applies to Chrome Developer Tools. See update below.)
Find an element that contains the disappearing element. Right click on the element and apply "Break on... > Subtree Modifications." This will throw a debugger pause before the element disappears, which will allow you to interact with the element in a paused state.
Update Oct 22 2019: with the release of v. 70, it looks like FireFox finally supports this kind of debugging 2 3:
Update Sep 15 2020: Chrome has an "Emulate a focused page" option (you can get it from the [⌘]+[P] Command Menu, or Global Preferences) for this exact need. 5 - h/t #sulco on Twitter
An alternative method in Chrome:
Open devTools (F12).
Select the "Sources" tab.
While the element you want is displayed, press F8 (or Ctrl+/). This will break script execution and "freeze" the DOM exactly as it is displayed.
From this point, use Ctrl+Shift+C to select the element.
Open console
Type in setTimeout(()=>{debugger;},5000);
Press Enter
Now you have 5 seconds to make your element appears. Once it appeared, wait until the debugger hits. As long as you don't resume, you can play with your element and it won't disappear.
Useful tip to avoid repeating those steps above every time:
add this as a bookmarklet:
Bookmark any page
Edit this new bookmark
Replace the URL/location with: javascript:(function(){setTimeout(()=>{debugger;},5000);})();
Next time you wish to use this, just click/tap this bookmark.
Verified in 2022
Do the following:
Open the console and navigate to Elements tab
Type command + shift + P (OSX) or control + shift + P (Windows)
Type the word focused
Select Emulate a focused page from the the menu
Now clicking around in the console will not close the element.
I am using chrome on Mac there I've followed above steps but I'll try to explain a bit more:
Right click and go to inspect element.
Go to sources tab.
Then hover on the element.
Then using keyboard F8 or Command(Window) \. It will pause the screen in a static state and the element won't disappear on hover out.
In Firebug there are different solutions for this:
You can use Break On Mutate inside the HTML panel. (with this you'll also be able to find out which element it is)
You can right-click the element and choose Inspect Element with Firebug
Also you may want to follow issue 551, which asks for a way to temporarily block specific events.
Edit:
To find out which element it is you can also enable the HTML panel options Highlight Changes, Expand Changes and Scroll Changes Into View to make the element visible inside the HTML panel.
Sebastian
In my case, I used Expand recursively option on google chrome:
The steps are:
Inspect the dropdown field
Find the dynamic DOM (the purple highlight)
Right-mouse click on that dynamic DOM
Choose Expand recursively:
We can see all elements are there
Here is a demo:
Hover over the element with your mouse and press F8 (this in Chrome) to pause the script execution. The hover state will remain in visible to you.
It take you to the sources tab.
Go back to Elements tab. This time code will not disapper.
There Could be Dom element and the controller functions fighting at to refresh the session. Running the application by "Start without debugging" helped in my case.
enter image description here
you can view the elements appearing and disappearing in the inspector under elements. If you navigate to the element when it is visible you should be able to see it disappear or see its css change when it status changes.
This is possible with firebug in firefox or the built inspector in chrome.
I've written an article about debugging CSS of disappearing elements
Using hotkeys to automatically go into debugger mode with hotkeys keyboard shortcut:
Install the shortkeys extension
Click on the extension icon and chose "options":
Configure as follows:
Click "Save shortcuts" button (bottom-right)
Now, go to any page, make sure devtools is opened, and hit CTRL+SPACEBAR keys, while your inspection target element is visible.
I'm using Windows OS and this hotkeys combination is good for me and is not "taken" by any other shortcut, but of course, you can choose any other.
i had the same problem but i use Firefox it disappear as soon as i open inspect element found a solution:
open the 4 dashes(settings) go to web developer > Debugger and immediately press F8 which is the shortcut for the pause that stop the script before it kick and detect that you opened the developers tools
If I write:
window.onbeforeunload = function(){ return 'exit?' ;};
I get a popup to stay / leave the page.
you can create a custom pop-up in html?
the problem is this:
if I create a popup html, which is activated only when you exit from the current page, and I will see him for half a second, then change page ... how can I fix this?
I need something (like the command alert) I block the page until you press a button.
You can't do that. Which is good, because it would be really damn irritating if every website could stop me from browsing away from the page until they felt like it.
onbeforeunload is the only mechanism you've got. It ensures the browser still has enough control to let me leave if I want to, and prevents you from sticking me in an alert loop or similar.
I'm trying to debug a JavaScript onFocus event attached to a bunch of text boxes on a page. The bug occurs when selecting a text box and then tabbing to the next text box. I'm trying to debug this by placing a break point in the onFocus event using the Chrome Developer Tools. The problem I'm facing is that when I select a text box and the break point is caught, Chrome Developer Tools steals focus and does not return it, so I can't tab to the next text box. Anyone have an idea for a work around? I guess I can resort to alert statements to print all of the information I need without using Chrome Developer Tools......
Chrome Dev Tools includes a Play/Pause button both in the Inspector and as an overlay to the webpage. Using the overlay prevents focus from landing on the Inspector.
Also, I've found the following type of logging solution to be easier to track than the interval method (thanks to less redundancy and the ability to pick up on changes that occur more rapidly than the interval):
$('*').on('focus blur', function(event) {console.log(event.type + " to:"); console.log(document.activeElement);});
One option for debugging tricky cases is to set an interval to poll the focus in the console.
setInterval(function() {console.log($(':focus')); }, 1000);
Type this in the console (update it to include whatever details you are interested in), hit enter, and then keep the console where you can see it while you do stuff in your UI.
*MDN docs for setInerval()
You are right, Chrome DevTools receive focus and do not restore it when you switch back to the debugged page. Feel free to file a bug at http://new.crbug.com (make sure you start the summary with "DevTools: " so that the bug can be assigned to the appropriate team as quickly as possible.)
On a side note, console.log() is a slightly better alternative to alert() as it allows formatted output.
There's a checkbox in the Rendering tool of Chrome DevTools labelled "Emulate a focused page". This prevents the webpage from getting blur events when you click on DevTools or other windows.