Is there some way to debug code that you have inserted from the firefox developer console terminal? I.e I inserted
document.onkeydown = function(event) {
// check keys pressed and perform some logic
}
If I knew where the javascript entered from the developer console goes(which .js file it was in) I could debug it but I haven't been able to figure that out.
In the chrome debug console, type this:
document.onkeydown = function(event) {
console.log(event)
}
The return value will be a function, like this:
Double click on the function and a VM.js tab will open. This contains the code generated by the VM for this function. You can set a breakpoint there.
The debugger; statement is exactly what I needed.
document.onkeydown= function(event){
debugger;
//function logic here
}
Then from the image below you can see that you can set your breakpoints in the debugger where you need them.
Related
I need a javascript that reads the QR code, if the URL or instruction shown matches the URL we use, it executes that script
If not, it pops up a warning that the code link is not one of ours, and offers a button to let the user launch the QR link.
Yes, this is a mobile app for my company to check inventory
Here's what I have
if (data.text == 'http://gmail.com') {
window.open(data.text, '_system', 'location=yes');
}
else
{
window.location = 'http://www.jths.co.uk/index.phtml?d=541300';
}
the only part that works (if I remove the rest of it) is this
window.open(data.text, '_system', 'location=yes');
It could be that "data" is undefined or not an object as Sergeon mentioned.
To investigate the issue, you could open browser's Developer Tools, check the console to see if it had any exceptions. You could also put the breakpoint to the line of:
if (data.text == 'http://gmail.com') {
Then you could watch the value of data and data.text or step over.
I want to insert my debugger function inside another JS function and halt the execution.
I know return false/true does the job, but I want my debugger function to do that automatically.
Example:
<script type="javascript">
function validateFirstName () {
//validating first name field
var fn = $('#firstname').val();
if(fn == "") {
$("#errorMsg").html("Please insert first name");
$("#firstname").focus();
return false;
}
debugger(); //I want to stop everything here
// if validation passes, redirect browser:
window.location = 'nextpage.html';
}
function debugger () {
console.log("Some custom message here");
return false;
}
</script>
You'll notice I put my debugger function inside the validateFirstName() function.
I assumed that return false in my debugger() function will stop the validateFirstName() from executing. But it doesn't.
Without adding return false inside the validateFirstName() function, how can I use my debugger() function to stop all execution?
replace
debugger(); //I want to stop everything here
with
return debugger(); //I want to stop everything here
the above example will always stop on true or false.
This will continue to the window.location if it's true and stop if it's false.
if(!debugger())
return;
in your case it seems to be a function inside of a function so you might as well use
if(!debugger())
return false;
Seems what you really want to do is set a breakpoint on the executing code.
In Chrome Browser press Ctrl+Shift+I
Then Go to Sources Tab
Click the Arrow pointing right (looks like a play button) on top of the counting line numbers to see list of websites
Find your website click on the folder
Find whatever script that you want
Now click anywhere in the code to close the side bar
Now finally click on any number on the side thats counting down the lines
That will set a breakpoint which means it will stop on that code if you make the code go there by doing something on your website, or forcing the code to run using the
Console tab or simply in your address bar typing javascript: function_to_call();
You could throw from debugger () like this.
function debugger () {
console.log('Some custom message here');
throw 'Debugging Code';
}
Although this will do what you want it to, I don't recommend it. Basically what's happening is you are throwing an error which isn't being caught in your code (the browser will catch it, but that is probably not as clean).
You could throw an error:
function validateFirstName () {
//validating first name field
var fn = $('#firstname').val();
if(fn==""){
$("#errorMsg").html("Please insert first name");
$("#firstname").focus();
return false;
}
debugger(); //I want to stop everything here
// if validation passes, redirect browser:
window.location='nextpage.html';
}
function debugger () {
throw new Error("Some custom message here");
}
try{
validateFirstName();
}catch(e){
console.log(e);
}
If you are using a modern browser like Chrome, why not just use debugger instead?
that will trigger the debugger in your developer tools.
like this:
debugger; //I want to stop everything here
notice the missing ()
I work with some very large and confusing JavaScript files that I did not write. Sometimes an alert will come up but I don't know where it's coming from.
You could search all files for the text contained in the alert but if that text is dynamic it won't work.
Is there a way to set a breakpoint in order to intercept an alert?
At the very top of your HTML:
window.alert = function() {
debugger;
}
debugger is a statement that invokes any debugging functionality available. With developer tools open, you'll automatically hit a breakpoint whenever alert is called. You can then inspect the call stack to see exactly what called the custom alert function.
It may or may not be helpful to you, but you can overwrite the alert function to do whatever you want with it. For example, instead of alert boxes, you could have it log the message to the console.
window.alert = function(msg) {
console.log(msg);
}
alert('test');
I agree with Brian Glaz, but in order to get more details (line number) you might try to throw an error when alerting something and outputting the error on the console. this way, the console will point you to the right line number where the alert function was called.
Put this snippet at the top of your document and give it a try :
var originalAlert = window.alert;
window.alert = function(){
try{
throw new Error('alert was called');
} catch(e){
console.warn(e);
}
return originalAlert.apply(window, arguments);
}
Open Chrome push F12 key and go to Sources.
Then choose a script file Ctrl+F and search for alert.
You can put breakpoint on any line you wish
Obviously, window.onbeforeunload has encountered its fair share of problems with Chrome as I've seen from all the problems I've encountered. What's the most recent work around?
The only thing I've got even close to working is this:
window.onbeforeunload = function () { return "alert" };
However, if I substitute return "alert" with something like alert("blah"), I get nothing from Chrome.
I saw in this question that Google purposefully blocks this. Good for them... but what if I want to make an AJAX call when someone closes the window? In my case, I want to know when someone has left the chatroom on my website, signalled by the window closing.
I want to know if there's a way to either
(a): fix the window.onbeforeunload call so that I can put AJAX in there
or
(b): get some other way of determining that a window has closed in Chrome
Answer:
$(window).on('beforeunload', function() {
var x =logout();
return x;
});
function logout(){
jQuery.ajax({
});
return 1+3;
}
A little mix and match, but it worked for me. The 1+3 makes sure that the logout function is being called (you'll see 4 if it's successful on the popup when you try to leave).
As of Chrome 98.0.4758.109 and Edge 100.0.1185.29, Chromium has not met the standard. There is a bug report filed, but the review is abandoned.
Test with StackBlitz!
Chrome requires returnValue to be a non-null value whether set as the return value from the handler or by reference on the event object.
The standard states that prompting can be controlled by canceling the event or setting the return value to a non-null value.
The standard states that authors should use Event.preventDefault() instead of returnValue.
The standard states that the message shown to the user is not customizable.
window.addEventListener('beforeunload', function (e) {
// Cancel the event as stated by the standard.
e.preventDefault();
// Chrome requires returnValue to be set.
e.returnValue = '';
});
window.location = 'about:blank';
Here's a more straightforward approach.
$(window).on('beforeunload', function() {
return "You should keep this page open.";
});
The returned message can be anything you want, including the empty string if you have nothing to add to the message that Chrome already shows. The result looks like this:
According to MDN,
The function should assign a string value to the returnValue property
of the Event object and return the same string.
This is the following
window.addEventListener( 'beforeunload', function(ev) {
return ev.returnValue = 'My reason';
})
This solved my problem why it wasn't working in my app:
Note that the user must interact with the page somehow (clicking somewhere) before closing its window, otherwise beforeunload is ignored in order not prevent abuse.
function convertDateFormat(){
// alert("hi");
$(".tour-dates ul li").each(function(){
// alert(monthConvert($(this).find(".month").text()));
var replace = monthConvert($(this).find(".month").text());
$(this).find(".month").text(replace);
});
}
I have the above function in a js file and i'm calling it from $(document).ready(function(){...
you can see i have two alert statements that are commented.
if they are commented the function doesn't seem to be called because the changes aren't reflected.
If i remove the comment and let the alert work, the changes appear!
What am I doing wrong?
FYI:
The monthConvert function:
function monthConvert(monthInt){
var monthArray = new Array();
monthArray["1"]="JAN";
monthArray["2"]="FEB";
monthArray["3"]="MAR";
monthArray["4"]="APR";
monthArray["5"]="MAY";
monthArray["6"]="JUN";
monthArray["7"]="JUL";
monthArray["8"]="AUG";
monthArray["9"]="SEP";
monthArray["10"]="OCT";
monthArray["11"]="NOV";
monthArray["12"]="DEC";
return monthArray[monthInt];
}
Perhaps you could check your browsers JavaScript logs for errors.
In Internet Explorer 9 press F12
In Firefox download firebug.
In Chrome press CTRL + SHIFT + J
It's hard to know exactly what's going on without seeing the complete HTML, but a minimal test case from your code above seems to work, with or without the alerts: http://jsfiddle.net/g_thom/5ChNh/
So, your problems seem to lie elsewhere than the code so far provided.
Your Javascript file is cached by browser. Just disable the cache or Press Ctrl + F5 to refresh page.