I'm using chrome for a new website, and I'm doing some javascript debugging.
One of my favorite techniques to debug nested expressions is to put a breakpoint, enter an expression in firebug's input panel in the console tab and press run.
But I don't see this feature in chrome. I'm probably overlooking something. Is it there? And where can I find it.
You can do it right from this page: Hit CTRL+SHIFT+J, click the Sources tab, choose chromes-alternative-for-firebug-evaluation-console from the file drop down on the left, click on line 41 to create a break point. Now refresh the page and your breakpoint will stop the debugger.
Ctrl + Shift + I will open Chrome's Developer's Tools. Or (Chrome v9): Options -> Tools -> Developer Tools. Ctrl + Shift + J is a keyboard shortcut for the Javascript console.
Under the Scripts tab, you can click on the line number to set a breakpoint.
You can also try right clicking on the page and choosing "Inspect Element" which should open the developer tools for you. Then you can click the Scripts tab like Harmen said.
Related
I want to access the developer tools on this domain "http://umang.gov.in" using F12 or right click of the mouse but the site website developer block this option.
I follow this step to access this.
Open browser menu > More tools > Developer Tools.
But it is too long process please help me provide me the alternative of it.
If you just want to inspect the elements and see then you can follow this:
Open an empty tab and press F12 and then copy and paste this Url in the address bar : http://umang.gov.in
Open the console using right click in a new tab. Then simply copy and paste the URL in that tab. You will get the DOM there.
Is there anyway that I can save or export the history of JavaScript console input (console history) in Google Chrome? I'm not looking to save the output or the errors, so hovering my mouse over the console box, right-clicking, and selecting Save as... is not the solution. I don't want to have to scroll up with the arrow keys and copy-and-paste the contents each time.
I figured out a weird solution that seems to work:
Open Chrome Developer Tools (press CTRL + SHIFT + J)
If the developer tools window is docked, undock into a separate window (open the ⋮ menu to choose docking option)
Inside the developer tools window, press CTRL + SHIFT + J which will open a developer tools window for the developer tools window!
Inside the second developer tools window, enter the following command inside console:
localStorage.getItem("consoleHistory")
This should print the console history, encoded as JSON inside the console. You can decode the JSON into an array using this command:
JSON.parse(localStorage.getItem("consoleHistory"))
Or copy the JSON to clipboard using:
copy(localStorage.getItem("consoleHistory"))
I'm sure this must be a burden to other people too...
Say I am debugging a website, and there is an element on the site that when clicked calls a particular function; for example:
<img src="foo.png" onclick="javascript:Bar();" />
But I have no idea where Bar is declared in terms of the file structure. It could be coming from an external source or could be in the website solution.
Are there any tools that can be added into the browser (i.e. a FireFox extension) that can assist with this?
I'd sort of like something that when I click something that fires some javascript, breaks the execution and shows me where the execution was going to occur
You can use Firebug (FF add-on)
Open Firebug (press F12), Open Script tab and use search field.
In chrome (> v 15) developer tools you can search all sources.
Press F12, make sure the console is shown, then on the tab bar next to console is search, go into that tab, type in function Bar and hit return. Or after pressing F12 press Shift Ctrl F (Command option F on Mac)
There are a few caveats on this , e.g. i dont think this will find scripts inside iframes
I am developing a web-application, and google-chrome started behaving weird. When I make change in a JavaScript file, after I hit refresh on the debugger - I still see the same code in the debugger, and the browser executes this old code. Why is google-chrome behaving like this and how can I solve this?
Open Developer Tools, by right clicking and choosing "Inspect Element" or Ctrl/Cmd + Shift + J
Click the Cog icon in the bottom right of that window.
Choose the General Tab
Tick "Disable cache"
This will disable Chrome from caching (locally storing) a copy of the js file
perhaps is a cache problem. try doing a cache refresh (ctrl-r, ctrl-f5). if you use cache.manifest file then you need to touch it in some way and double refresh your app for the changes to show.
With widescreen monitors, there's plenty of horizontal screen space. In the webkit debugger (chrome) I'd like to be able to view both the script window (when stepping through code) and the console window at the same time.
Unfortunately I can't figure out how to do this - is it possible?
Generally, the ESC key is bound to showing and hiding the console. If you are looking at another panel and hit ESC (or click the second-from-left icon in the toolbar row; it looks like a > with some lines next to it), that will layer the console over the panel that you are looking at.
I think that should allow you to run the script debugger more or less side-by-side with the console.