I feel that this is a very, very basic question, so please excuse me in advance. I've created both an HTML file that links to a Javascript file, and in the javascript file, I have console.log("Random Statement"). But it's blank for every browser I try it on.
I have tried reading forums, and have gathered something about "developer tools" and F12, and Firebug. But can someone please give me a concrete answer as to what I need to do to make "Random Statement" appear on the screen?
In Firebug, choose 'Console' from the menu at the top (it's the leftmost choice). When your call executes, the message will appear in the console window. I use console.debug rather than console.log.
You will need to use development tool (F12 for most browsers) or download Firefox and Firebug plugin(F12).
Console is a way of debuging your code (in case of errors).
You can also use alert(); or write() in Javascript
Also if you post some of your code, it would be useful for us to check your syntax, because that could also be an issue
console.log writes to the browser's console. In chrome f12 pulls up the dev tools. From there click console to see the actual console.
alert() will output it in a dialog to the "screen"
$('#someId").html() will do it in jQuery to a particular DOM element id="someId"
How to use the Chrome console:
https://developers.google.com/chrome-developer-tools/docs/console
Try this if you want console.log to output to the screen
console.log = function() {
document.writeln(arguments[0]);
}
And then
console.log("Message");
Should do it
Related
This website (www.samy.pl) uses some technique so that no one can inspect the code (Ctrl+Shift+I) or view source (Ctrl+U). It can detect if you have opened the console or inspector the code automatically changes.
How this is possible?
You could always save the website.
In chrome open the menu -> more tools -> Save page as..
You should be able to run the html file in chrome, and use Dev Tools without it blocking you.
There is a console "clearing" API that is mentioned in this answer.
Here's what I think is happening:
First, I think Google Chrome DevTools emits an event when it is open/launched.
The page author listens for this 'launch' event with the following handler logic:
Run a chrome.devtools.inspectedWindow.eval DevTools inspection API
Set document.body.innerHTML to the winky-face div
Also, a setInterval that executes a console.clear() before the console.log() of "no source for you".
I also inspected the EventListeners tab of Chrome DevTools while reading the "no source for you"-page.
Unfortunately, the two event listeners you can view don't seem to do anything useful:
one returns false
the other wires together forms and their associated submit actions.
Hope this helped
hahaha, this is a good one, you should not expect less from samy!
Now I see why people think it is the wrong answer (the source get replaced if you do otherwise)
1.Navigate to site with inspector open there you end up with "No source for you! You found easter egg #7."
2.and then check the source to find Easter egg #2:
view-source:https://samy.pl
you will see:
/*
No source for you! Easter egg #2
*// AFTER SOME LONG WHITE SPACES HERE /.source.replace(/.{7}/g,function(w){document.write(String.fromCharCode(parseInt(w.replace(/ /g,'0').replace(/ /g,'1'),2)))});
This is the way he loads the site(by injecting js), by replacing two type of white spaces for 1 and 0 and parsing that to char code by some regex and then that to string of course :D
https://de.wikipedia.org/wiki/Whitespace_(Programmiersprache)
If you paste that part to a js console, you will get the tags that loads the page.
ps. to see the rendered source, just load the page normaly and hit F12 after disabling javascript.
Have fun!
Create an index.html somewhere, containing an <iframe src='https://samy.pl/'>. Load it in your browser and then open devtools. You will see the source inside the iframe.
Update:
Go to view-source:http://samy.pl which is the link of what the view source right click brings you to. It only works on Chrome I think.
If you are using chrome, go to the menu at the top right. Then go to more tools, and click developer tools.
After a lot of tinkering and speculating together, my roommate succeeded in the end with quite a naïve approach.
Simply open the Chrome devtools and copy out the source before it gets replaced. Giving Chrome processes low priority and doing some heavy-lifting with your CPU (compilation or other) helps.
Chop, chop.
Ah! I have found an extremely easy way to do it.
1. Open Firefox (Chrome only shows you part of it).
2. In the URL bar, type in javascript:alert(document.documentElement.outerHTML);
3. Press Enter.
4. Voilà!
New Way to find the source code! But its complicated!
Open a new tab.
Open Devtools (Inspect Tab)
Click On Toggle Device toolbar (the mobile like icon)
Click on "No Throttling" to slow down the page loading time
Select "Low - Tier Mobile"
Open the page!
When you see the icons appear on the page, you can now see the source code! :)
sorry very late
but i think i have the answer
He used this node package
to which he has contributed and forked too
the package docs say that it wont work if the devtools are undocked
You can simply use the developer tools in almost all the browsers. Just Press F12 and the developer tools section will be there.
Thanks
I'm trying to debug an error message in a large and complicated frames based web/ASP.Net app using IE8 and Visual Studio 2010. Specifically, I am getting a "Member not found" message box which appears to be a straightforward JavaScript alert(). Unfortunately I don't know where in the code the problem is happening, and fiddler2 wasn't much help in this case.
My question is, can I get IE to break at the alert() call so that I can debug it?
String search for "Member not found"
Add 1 / 0; before the line.
Turn on break on all errors.
(I assumed you knew the developer tool existed. Hit F12 and navigate to the script tab)
Edit:
Thanks to #DmitriyNaumov
var aalert = window.alert;
window.alert = function() {
aalert.apply(this, arguments);
1 / 0;
}
You can try using the IE Developer Toolbar from Microsoft. I don't know if it allows you to Set JS breakpoints, but it is a great tool to have on hand anyway!
You can use the IE debugger , press F12 and then under the script tab you can add breakpoints
Using IE 8 you can use Developer Tools which is a little like Firebug for Mozilla Firefox.
http://www.microsoft.com/download/en/details.aspx?id=18359
(for more information)
this way you can create breakpoints and debug the script execution on the page step by step
Just press F12
Change alert into a new function that throws a proper error.
window.alert = function(msg) {
throw "Alert: " + msg;
};
Older versions of IE don't allow overwriting window properties like alert in this way in JavaScript ... but you can still do it with VBScript.
Sub alert(msg)
Err.Raise 8, "Alert", msg
End Sub
If you go the VBScript route, make sure it precedes any JavaScript that references the alert function, or you'll have missed your opportunity.
If it's a window.alert, you can do this:
Enable external debuggers in IE.
Attach visual studio as a script debugger.
Reproduce the problem.
While the alert box is shown, break in the debugger.
When you dismiss the alert, the debugger will be paused on the next line of code.
Use the current call stack to set a breakpoint where ever before the call will be most useful for the next time.
Unfortunately this trick only applies to alert and confirm, since they are modal dialogs.
I am trying to watch my javascript code using the console.log(text) command - and it does work... but the console gets flushed everytime the url changes.
Is there any way to persist my console logs between page changes?
Click on the bottom-right corner gear icon in the Chrome developers tool, check 'Preserve log upon navigation' option and you are done.
For the record, these days both Firefox and Chrome have 'persist' options in their inspectors / conosole. You need to right click in the console window and then select the relevant option tfrom the popup menu.
There isn't a way to do this yet but from what I've read it is a future feature they will implement. Here is the Issue ticket on it: http://code.google.com/p/chromium/issues/detail?id=77058
EDIT:
Chrome has implemented this feature. Read the answer below
There's only 1 way that I know of, but not with Chrome: With the built-in Web Inspector in Firefox 4+, which doesn't flush the logs between pages.
#scrappedcola notes that Firebug does this as well, but I'm referring to the built-in inspector.
I recently switched from Firefox to Chrome and I (probably) missed an important feature. I was used to test javascript snippets on FF from within the Firebug console this way: open the console, write the script and finally press CTRL + Return to execute the code.
It seems not possible to do the same in Chrome console, as when I type some code there and press return to start a new line the code is executed immediatly.
Is there a way to replicate the Firefox behavior on Chrome?
Thanks.
It seems that there is no explicit “multiline mode”.
But you can:
Paste code (it will preserve multiline)
Shift + Return to add a new line without executing the script
Related bugs:
https://bugs.webkit.org/show_bug.cgi?id=30553
http://code.google.com/p/chromium/issues/detail?id=72739
You can also hit Shift + Enter to start a new line without running the code in Chrome's console: https://developers.google.com/chrome-developer-tools/docs/tips-and-tricks#multiline-commands
Install Firebug Lite for Google Chrome. It has got a console.
Don't look for a full fledged Firebug. You will be disappointed :)
Oops,I didn't read properly at first. My bad!
In Firebug Lite, take Console. Then you will see a tiny red up-arrow at the right corner.
Click on it and you will get a multi-line console. Won't you?
I recommend this:
Write debugger; and hit Enter, in the console tab
This takes you to the Sources tab; if not, make sure debugger breakpoints are active
Now you can write whatever you want in the Sources tab, which acts like a full IDE with features like newline and indentation
Select any part of your code to run, and right-click, choose Evaluate in console
Better way of doing this using Chrome featue i.e Snippets where you can write javascript and save it in chrome developer console.
Its available underneath source inside developers tools while inspecting element.
More info about the snippets can be find on this link.
It was available in Chrome canary and I guess now it is available in default chrome browser also.
Firebug looks not capable to check js syntax error...
Is there any good way to do that?
Currently I just wrote a js but the firebug didn't show any error but the functionality is totally broken.
Firebug does do it. Make sure that you have JavaScript Console enabled, you can do so by clicking the Console dropdown and from their select Enabled. You need to press F12 key to open firebug and once you refresh the page, you will see any errors you have in your script in the firebug js console.
If you are using Firefox, you can also press Contr+Shift+J to open firefox's error dialog.
are you sure Firebug is turned on? If it's on, the little bug in the lower right is colored brown. if it's not on, the bug is gray.
also, I find that Web Inspector in Safari/Chrome is better.