I have a flex application with multiple tabs. If a user moves to the second tab, I need to disable the F5 (Refresh) key. How can I do it for IE?
I am not able to catch an event in case of F5, browser catches its first and refreshes the whole application. I don't want that to happen.
I guess IE runs a flash application as activex and in IE F5 key is not passed to activex, this is because I am facing such a problem. Is it correct?
Any solution?
You can do this from javascript. Stop the browser refresh as mentioned here and here.
add keydown event listener in your html file such like:
function (e):{
if (e.keycode == keyboard.F5){
// game.preventEvent is a interface your app provide to
// decide stop event or not
if (game.preventEvent){
e.preventdefault()
}
}
Related
I get this error in the Chrome console every time I try to evaluate an expression.
EvalError: Possible side-effect in debug-evaluate
What could be causing it?
I think I found the issue, reading through a discussion on an electron issues board.
It could potentially be caused by this: [inspector] Add custom error dispatch machinery for debug evaluate.
And hopefully fixed in this: [inspector] Don't trigger window.onerror with side-effects disabled.
This was an oversight in https://crrev.com/c/3557234, which led to a really weird developer experience: once a window.onerror handler was installed, typing into the Console or other side-effect free debug evaluations triggered this handler.
The website you are inspecting contains an onerror event listener.
A new bug in the latest version of Chrome triggers this event every time an expression is evaluated in DevTools. This includes live expressions and the console.
If this is your own website, add this line of JavaScript to your event listener to ignore any errors triggered outside of a script, where script is the second argument of the event listener function:
if(!script.endsWith(".js")) return;
Note that this will only work for external JavaScript (in .js files), in the case of JavaScript embedded in HTML <script> tags, it will disable your event listener entirely.
If this is not your website, you can temporarily disable the event listener in DevTools, like this:
At the top of DevTools, open the "Elements" tab
Press "»", on the right of "Styles", "Computed", "Layout"
Choose "Event listeners"
Find and expand "onerror"
Click "Remove"
This will remove the event listener, but the issue will return after you refresh the page.
Hopefully the next version of Chrome will fix this bug.
I was trying to figure out how to get some focus/blur behavior working for something when I ran into a really strange and annoying behavior in the Chrome debugger where I got an infinite loop while trying to debug an onfocus handler. It seems to be related to any action which takes focus away as I've been able to reproduce it using alerts instead of a breakpoint.
Here is my minimal example. Make sure you open this in another tab. Closing the tab is the only way I've found to end the loop.
https://codepen.io/cebo494/pen/OJxVZxq
Is this a known issue? Is there an easy workaround other than just using print statements to debug everything?
My final goal in my actual handlers isn't to take away focus, so it's not a problem if this is just a bad practice that I should avoid, but it's super annoying not being able to use the chrome debugger for my focus callbacks.
This seems to be specifically a Chrome issue, as the loop didn't occur in Firefox or IE. It only happens in Chrome and Edge (which is chromium)
I tried the sandbox, it actually got triggered on Firefox as well. I think the problem is that when you close the alert, the focus is lost on the button, but React internally re-focus on the button again, therefore trigger another onFocus call.
I would set a flag to manage the alert behavior, and reset the flag during onBlur event:
const [alert, setAlert] = useState(false);
// you can also pass event to implement the onblur method in the same function
const alertInfo = () => {
if (!alert) {
alert("focus");
setAlert(true);
}
}
Or if the event is only triggered by mouse, you can also use onmouseup/onmousedown to handle the event.
I am developing a Chrome extension that adds a custom devtools panel. My panel has some text boxes that allow user input, but any time I type a question mark, it opens Chrome help instead of tying the '?' character. Is there a way to stop this behavior?
UPDATE:
I should have mentioned that I'm using React in my extension and that I was using React's synthetic events.
This turned out to be unrelated to Chrome and due to a React JS nuance.
I was trying to call event.stopPropagation() on a React synthetic event which doesn't actually stop propagation to non-react registered event handlers such as the one that opens the help dialog.
The fix was to register a keydown event to the native DOM element and calling stopPropagation on the native event. This properly stoped the help menu from opening in response to typing in my input.
e.g.
<input
ref={input => input.addEventListener(event => event.stopPropagation())}
onChange={this.myOnChangeHandler}
/>
In Chrome's web-developer tools one can break at any point by pressing F8.
Often times I would like to break and inspect an element during a drag and drop operation by pressing F8. This won't work however.
Is there a native Chrome-way shortcut without running a custom script?
No, devtools window has to be focused in order for keyboard shortcuts to work. While you're dragging an element, it is the dragged element that has the focus, not the devtools window. The best you can do is with a custom script.
Try setting a timeout in the console to trigger the debugger after 2s:
setTimeout(function(){debugger;}, 2000);
And then step out of that function.
Is there a native Chrome-way shortcut without running a custom script?
No. Without any extra steps the DevTools must be in focus for F8 to pause execution.
If you'd like to call debugger while DevTools is open but not in focus, you can attach an event listener for the F8 key in a couple ways. These will work when you are dragging an element and you want to pause script execution.
1) Open the console and manually run this script on the target site before debugging:
window.addEventListener('keydown', function(e){ if(e.key === 'F8') {debugger;} }, false);
This will attach an event listener for the F8 key which will trigger debugger.
2) Create a userscript for Tampermonkey which runs the above script on sites that you permit. Sample userscript:
// ==UserScript==
// #name F8 to debug
// #version 0.1
// #description Press F8 when the console is open to trigger 'debugger'
// #author Drakes
// #grant none
// #require none
// ==/UserScript==
console.log("Press F8 when the console is open to trigger 'debugger'");
function KeyCheck(e) {
if(e.key === 'F8') {
debugger;
}
}
window.addEventListener('keydown', KeyCheck, false);
I do have a better solution without changing anything on the code.
Below trick is valid on Chrome Webtools, and for others I haven't checked.
Steps to put debug on drag and drop or even on any event of your choice
Open Dev Tools, jump to the sources tab, and check out the Event Listener Breakpoints
You would see Drag / drop event! but before going further. Stop there. If we use this, we’ll get a breakpoint on the very moment a drag/drop event is called. We don’t really want that right
we want to pause the UI state at a moment of my choosing, perhaps while dragging over a particular element. So instead of drag/drop, check the Keyboard event box.
Now, drag whatever you like, and at the appropriate moment hit any key from the keyboard.
Finally we got one paused state. You can’t right click to inspect elements, but you can use the element selector tool - hit the button top left of the Dev Tools pane, or [Cmd/Ctrl] + [Shift] + [C] and point at the element you want to inspect.
NOTE: Don’t forget to uncheck the Event Listener Breakpoint when you
are done
Open dev tools and click f8 -> Open Dev Tools, jump to the sources tab, and check out the Event Listener Breakpoints -> click keyboard checkbox, something like below
enter image description here
I want to make a chrome extension which performs a certain action when the user enters the a "back" navigation action.
ie: they click the back button in the browser, or they swipe backwards with 3 fingers on a macbook pro, or if they enter the shortcut alt + left arrow.
How can I detect these actions? Should I create some type of listener or handler which accounts for each one individually?
You can use the webNavigation API.
Start monitoring the details for each transition type that you mentioned. And then try to do something with this information.
chrome.experimental.webNavigation.onCommitted(function(details){
console.log(details);
});