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
Related
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 accessed a website and opened console.
On elements tab, I found a button in HTML code that has "onClick='request();" code
I want to find the definition of request() in javascript.
How can I do this?
Just type request in console and press ENTER. it will return the function definition.
This will only work If the request is defined in global Namespace....
Inspect the element in Chrome Dev Tools (F12).
Select that element and choose "Event Listeners" tab. open "click" one and you will find that function.
Right now I'm using a Chromebook that does not allow me to "inspect element" on a webpage.
I would like to be able to view the javascript console log from within Cloud9.
Cloud9 seems to be able to "preview" a webpage, but it doesn't seem to have the option to view the console log from that webpage.
I feel like I should be able to do this with the debugger, but it may be impossible.
A way to do this (or verification that it is impossible) would be appreciated.
Javascript console log is not possible in the "client" in Cloud9.
Inspecting a single element on Chromebook is possible.
If you want to highlight a single element, "right click" the element and select "Inspect element" from the menu.
Source: https://answers.yahoo.com/question/index?qid=20140314102249AA5VbJJ
Cloud9 debugger works for server side code, it doesn't allow to inspect pages in the browser.
I am trying to understand how other people's website's java script is working. Basically I can see that while clicking on an item, the properties of this item are displayed in other part of the window and I am trying to find an onclick handler that does this job (to debug and understand it). What I do:
Open chrome dev tools
Load the page
Go to sources tab
Press "Pause script execution"
Click on the item
But after this happens dev tools stops at this part
var n = 0, r = function(e) {
b.event.simulate(t, e.target, b.event.fix(e), !0)
};
in the jquery-1.9.1.min.js. Now, I know that there is some custom java script code assigned to onClick event for sure, but don't understand why chrome debugger stops at some jquery code.
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.