safari and chrome javascript console multiline - javascript

Firebug has a multiline feature in their console tool. Is there a way to get this functionality with the debugger tool in Safari/Chrome?

Shift-Enter on Windows allows multi-line entry where Option-Enter works on Mac.
A more fully featured editor is in the works.

For Google Chrome, you can Sources >> Snippets >> + New Snippet in the Developer Console.
Once you have written your multi-line code, you can execute it with the button or with Ctrl + Enter as mentioned on the button.
This is like a text-editor which has a host of keyboard shortcuts which you can find under Settings >> Shortcuts under Text Editor
Good Luck.

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

http://code.google.com/p/chromium/issues/detail?id=35487
Not yet.
UPDATE: the status of the issue I linked to is now "fixed".

Try pressing option (shift on Windows) at the same time as return. Inserts a newline on Mac.

Shift + Enter seems to work in chrome browser. I am using ubuntu 12.04 as my operating system. Thanks to Mr Bester and Sam Dutton for their inputs.

It is simple ... place semicolons between your multilines and it will work in the console.
For example
if you have html like this
<div id="test">This is a test statement</div>
You could paste following in the console and it will work
var ourTest = document.getElementById('test'); alert(ourTest.innerHTML);
I hope it helped.

There is cool extension to chrome https://chrome.google.com/webstore/detail/bigconsole/klommbdmeefgobphaflhmnieheipjajm
It just add another tab named BigConsole and it allow multiline code execution

Try using the notepad (or someting else) and then copy/paste to the console, works for me!!!!

Related

How do I able to see the source code of this website www.samy.pl?

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

Is there any way to force Internet Explorer to break on alert()?

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.

How to write and run scripts in the Google Chrome Javascript Console?

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.

IE7 javascript command line tool

I have the IE7 Developer Toolbar for IE7. It doesn't allow you to change styles of elements nor does it have a JS command line feature/console. IE8 Developer Tools has a javascript command line. I need to debug something that is just in IE7 using a JS command line.
Does anyone know of an IE7 extension to run JavaScript during runtime? I have exhausted google looking for something.
Thanks for your help in advance!
Found out that Firebug Lite will do the trick.
http://getfirebug.com/firebuglite
The standard IEDevToolbar does let you change styles. Its the interface bewtween the DOM and CSS panes.
For a JS command console Ive been using DebugBar which im not completely happy with. But it works.
Haven't tested this myself, but you can use IE8 and switch to IE7 Compatability View
Go to IE developer tools and go to console tab. down the bottom there is a box where you can run js like alert('hello world') for example.

"No symbols loaded for the current document" while debugging JavaScript in Visual Studio

I'm working on a .NET 3.5 website, with three projects under one solution. I'm using jQuery in this project. I'd like to use the Visual Studio JavaScript debugger to step through my JavaScript code. If I set a breakpoint in any of the .js files I get a warning that says:
The breakpoint will not currently be hit. No symbols have been loaded for this document.
How do I fix this? I'm guessing that Visual Studio is having some trouble parsing through some of the jQuery code. I will try to replace the minimized version of jQuery.js with the expanded version, but I don't think that will fix it.
I was experiencing the same behavior in Visual Studio 2008, and after spending several minutes trying to get the symbols to load I ended up using a workaround - adding a line with the "debugger;" command in my JavaScript file.
After adding debugger; when you then reload the script in Internet Explorer it'll let you bring up a new instance of the script debugger, and it'll stop on your debugger command let you debug from there.
In this scenario I was already debugging the JavaScript in Firebug, but I wanted to debug against Internet Explorer as well.
Make sure you turn on script debugging in your internet options. And if you think it's on, double check it.
I had the same issue, but I solved it by changing my browser settings in Internet Explorer. Go to menu Tools -> Internet Options, select the Advanced tab, then make sure that both "Disable Script Debugging (Internet Explorer)" and "Disable Script Debugging (Other)" are unchecked.
Also, I needed to set Internet Explorer as my default browser, which is normally set as Firefox. To do that, in Visual Studio just right click on any browseable file in Solution Explorer and select "Browse With..." Select Internet Explorer and click "Set as Default".
I'm not sure if there's a way to get debugging running with other browsers, but it wouldn't surprise me if Visual Studio only plays nice with Internet Explorer.
Also, you may need to do "Attach to process" and add IExplorer.exe to get the debugger to start.
I would suggest using FireBug for JavaScript debugging. Give it a spin :)
I finally found the answer to this I think.
When you attach your debugger to the iexplore.exe process, you need to make sure you select "Script" as one of the debugging choices.
It's the button in a red box here: Screenshot of Select Button in Attach to Process Window
Then on the next screen, choose Script: Screenshot of Select Code Type window
This will warn you that you cannot debug Managed and Script at the same time, but that should be fine because your managed code is your server code and you attach to the web process (aspnet or w3wp) instead.
You'll know you did it right because VS 2008 will load ALL the script documents pertaining to that page (inline stuff, eval stuff, etc.) in Solution Explorer.
You'll have full access to the DOM, the immediate window will work, etc. It's pretty slick.
One other thing you might look for is a syntax error in your JavaScript code. That is what happened to me today. No symbols would load because I had one too many parentheses in my code. The IntelliSense barely registered the error. Once I fixed the syntax error, everything worked normally.
All of these answers are correct, but there is one more thing to check. Until yesterday I was always able to debug my JavaScript code from inside of Visual Studio (2012). I had added a Silverlight project to the solution, which turned on the Silverlight Debugger. This was my problem.
On the property page for the web application -> Start Options -> at the bottom of the page be sure that "Silverlight" is unchecked. Actually, I have only ASP.NET checked and now the debugger goes through Visual Studio.
Unchecking it and now the debugger stops on the "initialize" function as I wanted.
The solution for me was to update the IE from version 9 to 11. Hope it helps to someone. Peace!
You have to wait for the IDE to parse the JavaScript code. Just wait a while and you should see the JavaScript code change color. You will then be able to add breakpoints.
I had the same annoying issues on Visual Studio 2013, and JavaScript development without a debugger is just suicide.
All I did to fix it was to right click the break point red dot -> Disable Breakpoint and then right click again -> Enable Breakpoint.
This made the debugger work on JavaScript like a charm again.
This can also happen when your solution has multiple web projects, even if they're being served from a different ASP.NET Development Server (WebDev.WebServer40.exe) instance on different ports.
If running two or more web projects within your solution and you have multiple script files with the same name at the same place in different webs, the development web-servers may serve up the wrong file, causing this problem.
In my case, deleting the extra copies resolved the problem.
I sometimes have this problem with external JavaScript files - it is caused by the browser cache holding onto an old copy of the file. Forcing a refresh of the page linking to the JavaScript code solves the issue in this case.
Of course, make sure your debugger is attached to the correct browser process. ;)
This is perhaps glaringly obvious, but I stumbled over this for a second, so perhaps others will too. I didn't have Internet Explorer set up to handle HTML/HTTP, and hence it was not launched when I pressed the run button in Visual Studio.
Instead, I was starting Firefox. I went to Start Button | Default Programs, set all the defaults for Internet Explorer, and then debugging started working in Visual Studio for me without any other fuss.

Categories