Not registered yet?
Register now! It is easy and done in 1 minute and gives you access to special discounts and much more!
By Kevin Driedger
Now google chrome has introduce new feature. By Using this feature You can edit you code in chrome browse. (Permanent change on code location)
For that Press F12 --> Source Tab -- (right side) --> File System - in that please select your location of code. and then chrome browser
will ask you permission and after that code will be sink with green color. and you can modify your code and it will also reflect on you code location (It means it will Permanent change)
Windows: CTRL-SHIFT-J OR F12
I think the shortcut has since changed to CTRL-SHIFT-J.
or Cmd-Shift-J for Macs. God I love this <kbd> tag. Too bad I can't use it in comments.
The Mac shortcut seems to actually be Alt-Cmd-J on the latest Chrome build.
F12 is the simplest way
Here, you can find the shortcuts to access the developer tools.
Windows and Linux:
Ctrl + Shift + I keys to open Developer Tools
Ctrl + Shift + J to open Developer Tools and bring focus to the Console.
Ctrl + Shift + C to toggle Inspect Element mode.
⌥ + ⌘ + I keys to open Developer Tools
⌥ + ⌘ + J to open Developer Tools and bring focus to the Console.
⌥ + ⌘ + C to toggle Inspect Element mode.
On mac, the shorcut to toggle inspect element mode is shift ⌘ C (Shift - Command - C)
To open the dedicated ‘Console’ panel, either:
Please refer here
From the console in Chrome, you can do console.log(data_to_be_displayed).
This will not open the console. This will only log to the console.
F12 does not seem to open the debugger on my Windows 7 system with Chrome 23.0.1246.0 dev-m.
+1 for F12, it also works for IE, FF, Edge. No need to learn Emacs like key combinations. Except for Mac.
Shift + Control + I opens the Developer tool window. From bottom-left second image (that looks like the following) will open/hide the console for you:
Ctrl + Shift + J opens Developer Tools.
Try adding this to your source:
It works in most, if not all browsers. Just place it somewhere in your code, and it will act like a breakpoint.
It's hard to find what this command is called if you've forgotten it!
It's also tough to google for reasons why this doesn't always work. Are there limitations on this?
You need to have Chrome Developer Tools open for this to work (hit F12 on Windwos/Linux, don't know the key on a Mac, or just inspect an element). If you have Developer Tools open, an extra bit of awesomeness is that you can click and hold the Refresh button to clear the cache.
It's also super awful if you accidentally leave this in a non widely tested codepath, only to have your users complain about the whole webpage pausing when clicking something. Not that this happened to me :p (we now have a lint to stop debugger statements being merged into develop).
@CallumRogers Only if your users use your site with the Developer Tools open, though.
@JoshM. Please note that leaving this in Production code is very bad as it causes issues in certain versions of IE even for users who don't have dev tools open.
Thanks, does anyone know how to enable the console directly under the debugger pane? Sometimes it appears, but other times not, and I must constantly switch between the "Console" tab and the "Sources" tab where the debugger is paused. EDIT: found out how, simply press Escape in Sources tab :) link