Save / export Chrome's JavaScript console input history - javascript

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"))

Related

How to unblock the Developer tools

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.

Can't see localStorage keys with Chrome Developer Tools

I am trying to do a simple JS exercise using localStorage to store some values; when I try to inspect these values using Chrome devtools I can't see the keys
Is there any setting so that I can see it with every key?
Edit:
I am trying to set this value using
localStorage.setItem('Try', 'This is a try');
console.log(localStorage.getItem('Try'));
and the "This is a try" is correctly logged in the console.
Your window showing the value seems to be moved all the way up
hover the mouse on the line between the "This is a try" and "Key", click and drag down.
you should see the covered screen then
I fixed this by clicking the button Chrome Developer Tools > Settings > Preferences > Restore defaults and reload

Discovery JavaScript execution path and files in Browser Developer Tools

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

Context Menu for Directly Loading Chrome's Console

Quick question.
I develop a lot of javascript and usually end up accessing the console via right-click, inspect element, and then navigating to the console tab.
I know there are keyboard shortcuts, but I've never really been able to get used to using them.
So, what I'd like to do is create an extension for Chrome that registers another context menu item that would directly open the JS console. I can register the context menu just fine, but don't know how to get it to actually open the console on click. It may not be possible, but I just wanted to throw it out here to see if anyone has a solution.
Here's what I currently have:
chrome.contextMenus.create(
{
"title": "Show Console",
"contexts":["page","selection","link","editable","image","video","audio"],
"onclick": function() {
alert("working");
}
}
);
You cannot do that, there have been talks to do a Inspector API for Chrome. In the meantime you can use the following keyboard shortcut to open inspector:
JavaScript Console: Ctrl + Shift + J
Inspector Console: Ctrl + Shift + I

chrome's alternative for firebug's evaluation console?

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.

Categories