When using the Mouse click option under the sources of the Event Listener Breakpoints option on the right, the debugger skips the following function code:
<html>
<head>
<script type="text/javascript">
function test()
{
return true;
}
</script>
</head>
<body>
<input type="button" onclick="return test();" value="test">
</body>
</html>
The problem is not that it doesn't run. It's that I can't debug it until I push the input button twice to be able to step into (F11) the function.
Otherwise I'm not able to debug what's inside the code. It's pretty frustrating because it happens every time I refresh the page. Is this a bug or is it meant to be like this?
I'm on: Chrome Ubuntu Version 40.0.2214.93 (64-bit)
P.S. For those that asked/will ask,
I'm working on maintaining a legacy application and unfortunately, it has many inline functions. There's no point in taking the time of putting all these into files when my company is building new software to replace it. Since resources are spent building out the new code, I'll have to do minor debugging of the legacy application this way.
Works for me, though I am using v38. As a workaround try adding the debugger statement into the handler (while you are debugging)
function test(){
debbugger;
return true;
}
Related
For standalone .js files, we can easily inspect it in "source" panel of development tools and set breakpoint for them. But I often come across those js snippets that are in script tags in HTML, how do I set breakpoint or debug them?
Moreover, in Joomla, some js are written in custom HTML modules, and if there are some errors in the code, unlike for other standalone js files, where chrome comes up with clickable line of error, in this case chrome will only report something like "index.php/:54", and when clicked, it doesnt take you to the error point, and the supposed 'line number' itself is totally not helping.
So, for these two scenarios, how do I debug the codes? And also, in the second scenario, what excatly does the number means?
Modern browsers also give you the option of placing a single line into your script, containing:
debugger;
Which effectively places a breakpoint, hitting it stops the JS execution and brings up the developer console's debugging tools.
Of course, you can't have this in production code, but it's a great tool for development.
Edit: on second thought, I just tried placing a breakpoint in an html-inlined script of stackoverflow in Chrome 41, and it worked. Are you sure it doesn't work for you?:) (Maybe you didn't look under the right source in the sources panel?)
i hope it will help u..
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>
Activate debugging in your browser (Chrome, IE, Firefox) with F12, and select "Console" in the debugger menu.
</p>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>
I wrote a page that used buttons with onclick to call a function as part of a set of practice problems and answers for my students. It has worked since July with no issues through Friday, September 5 at least. Today the buttons fail to function at all in Chrome, and I can't figure out why for the life of me. They do continue to function properly in IE.
I've posted the simplest code I could write that won't work below. It's awfully simple, and honestly I think it's fine. It seems to work if I paste the entire thing into JSFiddle's HTML box, but if I try to separate the script it doesn't do anything. I don't know whether that's because it's broken or because I am separating it incorrectly though.
I'm having trouble trying to debug it, largely because Google Sites completely rewrites your work into its own format which is more or less unreadable without being made of silicon. When I load this and try to click, I do get an exception:
Uncaught Error: shouldn't happen: ES5/3 object passed to makeDOMAccessible
But I have had absolutely no luck with figuring out what is happening there, or whether that is even really the problem or not.
I've read a lot about Google Sites being picky with Javascript, and I don't know whether the issue is with Sites or Chrome or the two together or what, but it's something that I'd like to get sorted out, as the bulk of my students and I primarily use Chrome.
All of the code below is going into an inserted HTML box as written, just FYI.
Apologies if this turns out to be a duplicate; I searched for quite a while and couldn't find a solution.
<html>
<body>
<button onclick="Check()">Push Me</button>
<script>
function Check() {
alert("It worked");
}
</script>
</body>
</html>
Any suggestions for fixing what I've got (if it's even broken) or redoing it in a straightforward way that would work with Sites and Chrome would be welcome. Thanks in advance.
Here is one full page that was working previously in Chrome and is no longer. It displayed the rows of a table as you pressed the various buttons.
EDIT: This appears to work in older versions of Chrome. I guess I need to hit up the Chrome forums with this issue.
The workaround suggested by epascarello, using addEventListener in place of onclick events, seems to work. I still can't get the alert window in my example to work for some reason (against Sites policy?), but the actual functionality I wanted, setting the innerHTML of a paragraph object, is working properly.
This appears to be an issue between Google Sites and Chrome v.37. Hopefully it is resolved in the near future.
Here is an example of equivalent code that is working correctly.
<html>
<body>
<button id="AnswerButton1">Check Answer 1</button>
<p id="Answer1"></p>
<script>
document.getElementById("AnswerButton1").addEventListener("click",function(){Answer(1);});
function Answer(n){
document.getElementById("Answer"+n).innerHTML = "Answer to Number 1";
}
</script>
</body>
</html>
Thanks to those who helped.
I'm working on a screen reader project and I needed to get the paragraph under the cursor. To do that in Firefox, I wrote an extension, to which my screen reader connects through sockets and gets the text. I needed to get the current element under the cursor and the function worked fine in a sample html page written by myself (So there is no problem with the function).
But when I try to attach the function to my JS file in the extension, It seems that the function which is called by "document.body.addEventListener('mouseover',myfunc(mEvent),false);" is never called.
But if I call
document.body.addEventListener('mouseover',function(mEvent){...},true);
myfunc is called.
I'm new to javascript, so excuse me if it's a stupid question, But why the
document.body.addEventListener('mouseover',function(mEvent){...},true);
is not working?
I always appreciated your nice helps and ideas. :)
While this isn't a direct answer to your question, I hope that it is helpful nevertheless. Using an extension for a screen reader is unnecessary, in particular you might not want to update that extension regularly as the browser's user interface changes. Firefox supports a number of accessibility APIs which you can use directly from your application. These APIs have the advantage of being stable, once your implementation is done it should continue working (as far as I remember there was only one occasion where Mozilla broke compatibility with existing screen readers).
As to the actual question: you didn't tell anything about the context in which this code is executing. Normally, extensions run code in their XUL overlay meaning that the context is the browser window, not the web page. Which would explain why your code isn't working (it's a XUL document, no document.body there). What you probably mean is attaching an event listener to the <tabbrowser> element where the web pages are loaded: gBrowser.addEventListener(...). Side-note: If you really wanted to catch all events on a XUL document you should register an event listener on document or document.documentElement.
Btw, you can see error messages related to extensions in the Error Console (the article I link to explains how to enable it in the current Firefox versions).
There may be other issues here, but the syntax of your addEventListener call is incorrect and could be causing the issue you are seeing:
document.body.addEventListener('mouseover',myfunc(mEvent),false); is actually invoking "myfunc" at the same time you are invoking addEventListener and passing it as the second parameter.
You should instead be calling it this way:
document.body.addEventListener('mouseover',function() { myfunc(mEvent) },false);
Add height to a body element.
<html>
<style>
.vh {
height: 100vh;
}
</style>
<body class="vh">
<script>
document.body.addEventListener('click', () => {
console.log('mouse click');
});
</script>
</body>
</html>
I suspect that the document is not yet ready, so there is nothing to bind to. Try adding an onload="addMyEventListener();" to your <body> and see if that fixes things up. I don't know the proper way to time things, so maybe someone else can chime in with the best way to handle this.
following Wladimir Palant's advise, the follow is working:
document.addEventListener('click', function() { ... }, false);
I also had the same problem and now solved it. After closing tag, try adding an document.body.addEventListener. Parser didn't recognize DOM object of the "addEventListener" event because HTML tag of DOM object is not closed.
Refer to following. It works well.
<html>
<body>
...
</body>
<script type="text/javascript">
document.body.addEventListener('click', function() { ... });
</script>
</html>
Ok, so I'm quite new to jQuery, but found this bizzare problem just now,
If we ignore jQuery for a second and consider this scenario, if I have two links like below both with an href and both with and onclick event. The first link will not follow the href because the onclick returns false, and the second link will because the onclick returns true.
Dont follow
Follow
This works just hunky dory in every browser as it should, the thing is, as soon as I include the jQuery script on the page this stops working in all versions of IE which then always follows the href whether the onclick returns false or not. (it continues to work fine in other browsers)
Now if I add an event using jQuery and call .preventDefault() on the event object instead of doing it the old fashioned way this behaves correctly, and you may say, well just do that then? But I have a site with thousands of lines of code and I am adding jQuery support, I don't want to run the risk that I might miss an already defined html onclick="" and break the web site.
I cant see why jQuery should prevent perfectly normal JavaScript concepts from working, so is this a jQuery bug or am I missing something?
The most likely cause is that you have a syntax error elsewhere in the page that is preventing javascript from running properly on the page. Turn on script error notifications in your browser to make sure it isn't hiding errors from you.
Try also:
onClick = "event.returnValue = false; return false;"
I corrected your sample code for the second link and tested in IE 8 and it works fine. I'm willing to bet JohnFx is right and you have some other error on your page stopping it from working.
I tested using an included jquery library as well.
Sample:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>
<body>
Dont follow
Follow
</body>
</html>
Anyone know anything about the Links browser? I am developing an application for Links (text mode) that is running on a terminal using Linux. The problem is that none of the 'on key' events (down, up, or press) will register. Here is the Javascript I am using:
<body onload="Alert()" onkeydown="CheckKey(event.keyCode)">
<script type="text/javascript">
function CheckKey(keycode) {
alert(keycode)
}
function Alert(){
alert("onload is working")
}
</script>
<!--A table goes here-->
</body>
The onload event is working fine, so I know that Javascript is enabled for the browser, but the onkeydown event does nothing. The problem is, I don't know if it is an issue with Links, Javascript, or possibly even a restriction of the terminal that it is running on. Was there a version of Javascript that didn't support 'onkey' events? Just a thought...
Any help would be appreciated!
I don't think that they will work. Links uses key commands for it's own navigation, I think that it's just not passing them to your script.