5 ms·

Using Code Snippets in Chrome Developer Tools

158 points by akras14 10y ago

ben174 10y ago
Not sure this is "hidden". Anyone who has spent ten minutes poking around chrome dev tools is likely to have discovered this.
- cobalt 10y ago
  yeah, I love to put little tools i write in here like Angular js debug functions
  - zachsnow 10y ago
    Any examples you'd care to share?
- pookeh 10y ago
  If you are new to dev tools then yes. But if you have been using it for a while and don't have any upfront "What's New in Devtools" when Chrome automatically updates then you prolly won't notice it. I certainly didn't.
- paradite 10y ago
  I guess I am not observant enough then. Spent hours of hours debugging in the exact "Sources" tab but didn't notice this feature.
- sctb 10y ago
  We updated the title from ”Hidden Text Editor in Chrome Developer Tools”, which was editorialized.
kyriakos 10y ago
In the 80s home computers shipped with a programming language as their OS (BASIC language to be precise) - today the browser dev tools are the closest equivalent. You can use them on any PC with no additional software - wished it was made more obvious so everyone could experiment with programming like those of us who got their first computer experience 25-30 years ago could do.
- g_delgado14 10y ago
  You may be on to something ..
- niftich 10y ago
  The browser has always been the one of the easiest ways of tinkering with programming, but these days our browsers come with sophisticated developer tools unlike anything else installed on an average person's PC. Back when I didn't know anything about compilers I wanted to write 'C++' but didn't understand how I could produce an executable, I instead saved html and js into folder and loaded them up in the browser -- and any changes were visible on refresh. And actually, these days this tinkering doesn't even have to take place locally. With sites like jsfiddle, anyone can develop remotely while still being able to debug the execution from the browser.
  - homero 10y ago
    That's how I first fell in love with PHP
  - rahimnathwani 10y ago
    1980s: Computers come with a BASIC interpreter 2000s: Computers come with a web browser that can run JS 2010s: Computers come with a web browser that can run JS and has some other tools But what was available in the early 1990s, when IBM-compatible PCs had become cheap enough to have at home, but ~everyone ran DOS+Windows? I don't remember there being any way (unless you count BAT files) to easily get started writing programs. For those who got their first taste of programming in the 90s, what language and compiler/IDE did you use?
    - endgame 10y ago
      MS-DOS came with GW-Basic and later QBasic, and the latter lives on in QB64: http://www.qb64.net/ http://www.qb64.net/
      - mabo 10y ago
4684499 10y ago
Is that possible to run these snippets automatically once page is loaded? I guess this will raise some security issues if it's possible, but I don't want to use things like Tampermonkey anymore.
- kuschku 10y ago
  There used to be, but it was removed years ago. The official suggestion is to use Tampermonkey instead.
acangiano 10y ago
Speaking of text editors within browser dev tools, I like Scratchpad quite a bit. https://developer.mozilla.org/en-US/docs/Tools/Scratchpad https://developer.mozilla.org/en-US/docs/Tools/Scratchpad It's built-in in Firefox, but can be installed on Chrome as well.
Nickersf 10y ago
Love it. Been using for a while now.
adamnemecek 10y ago
I discovered it back when this came out and pentesting has never been the same.
foota 10y ago
I was showing this to my coworkers the other day, they thought it was great.
twic 10y ago
Pretty cool. But surely not a patch on Firefox's built-in JavaScript editor, which has autocomplete and inline documentation: https://developer.mozilla.org/en-US/docs/Tools/Scratchpad https://developer.mozilla.org/en-US/docs/Tools/Scratchpad That said, something missing from both is an easy way to import and export the code.
- petepete 10y ago
  Chrome Dev Tools' editor has great autocompletion, and has done for a very long time. Also, you can 'map' assets to local files so live modifications can be saved without needing to import/export. Dev Tools are what keep me using Chrome at work, they really are unparalleled.
stephenr 10y ago
I know a lot of developers basically treat Google as Jeebus returned, and therefor infallible, but this just seems like unnecessary bloat. What's next, a JS minifier built into Chrome, so 1% of users can use it as an IDE while everyone else just gets more shit they don't need or want?
- Kalroth 10y ago
  The editor is necessary to the Chrome Developer Tools, since you can edit existing pages and debug the changes. The Code Snippet functionality is however not necessary (in my opinion), but it's such a small part of Chrome Developer Tools that I'm not sure it qualifies as bloat.
- skybrian 10y ago
  I doubt it adds much to the download size. DevTools already has a copy of the CodeMirror js library for displaying JavaScript in the debugger with syntax highlighting. I suppose you could strip CodeMirror of all editing functionality, but that sounds like more trouble than it's worth.
mxuribe 10y ago
I never knew this; quite handy!!
stefanwlb 10y ago
Are the snippets saved to the google account as well, so that I can access them anywhere I sync my chrome dev browser?
dccoolgai 10y ago
I have always loved Snippets and the whole Chrome Souces ecosystem in general. In fact, I use Sources as my editor of choice over Sublime, Notepad++, etc. I find the "map to local" feature outdoes anything I use from the other editors. Only gripe is I wish snippets were stored as text files (or at least that was an option)... couple weeks ago my Chrome profile got corrupted and I lost like a year of snippets.

158 points by akras14 10y ago

Not sure this is "hidden". Anyone who has spent ten minutes poking around chrome dev tools is likely to have discovered this.

cobalt 10y ago
yeah, I love to put little tools i write in here like Angular js debug functions
- zachsnow 10y ago
  Any examples you'd care to share?
pookeh 10y ago
If you are new to dev tools then yes. But if you have been using it for a while and don't have any upfront "What's New in Devtools" when Chrome automatically updates then you prolly won't notice it. I certainly didn't.
paradite 10y ago
I guess I am not observant enough then. Spent hours of hours debugging in the exact "Sources" tab but didn't notice this feature.
sctb 10y ago
We updated the title from ”Hidden Text Editor in Chrome Developer Tools”, which was editorialized.

kyriakos 10y ago

In the 80s home computers shipped with a programming language as their OS (BASIC language to be precise) - today the browser dev tools are the closest equivalent. You can use them on any PC with no additional software - wished it was made more obvious so everyone could experiment with programming like those of us who got their first computer experience 25-30 years ago could do.

g_delgado14 10y ago
You may be on to something ..
niftich 10y ago
The browser has always been the one of the easiest ways of tinkering with programming, but these days our browsers come with sophisticated developer tools unlike anything else installed on an average person's PC. Back when I didn't know anything about compilers I wanted to write 'C++' but didn't understand how I could produce an executable, I instead saved html and js into folder and loaded them up in the browser -- and any changes were visible on refresh. And actually, these days this tinkering doesn't even have to take place locally. With sites like jsfiddle, anyone can develop remotely while still being able to debug the execution from the browser.
- homero 10y ago
  That's how I first fell in love with PHP
- rahimnathwani 10y ago
  1980s: Computers come with a BASIC interpreter 2000s: Computers come with a web browser that can run JS 2010s: Computers come with a web browser that can run JS and has some other tools But what was available in the early 1990s, when IBM-compatible PCs had become cheap enough to have at home, but ~everyone ran DOS+Windows? I don't remember there being any way (unless you count BAT files) to easily get started writing programs. For those who got their first taste of programming in the 90s, what language and compiler/IDE did you use?
  - endgame 10y ago
    MS-DOS came with GW-Basic and later QBasic, and the latter lives on in QB64: http://www.qb64.net/ http://www.qb64.net/
    - mabo 10y ago

4684499 10y ago

Is that possible to run these snippets automatically once page is loaded? I guess this will raise some security issues if it's possible, but I don't want to use things like Tampermonkey anymore.

kuschku 10y ago
There used to be, but it was removed years ago. The official suggestion is to use Tampermonkey instead.

acangiano 10y ago

Speaking of text editors within browser dev tools, I like Scratchpad quite a bit. https://developer.mozilla.org/en-US/docs/Tools/Scratchpad https://developer.mozilla.org/en-US/docs/Tools/Scratchpad It's built-in in Firefox, but can be installed on Chrome as well.

Nickersf 10y ago

Love it. Been using for a while now.

adamnemecek 10y ago

I discovered it back when this came out and pentesting has never been the same.

foota 10y ago

I was showing this to my coworkers the other day, they thought it was great.

twic 10y ago

Pretty cool. But surely not a patch on Firefox's built-in JavaScript editor, which has autocomplete and inline documentation: https://developer.mozilla.org/en-US/docs/Tools/Scratchpad https://developer.mozilla.org/en-US/docs/Tools/Scratchpad That said, something missing from both is an easy way to import and export the code.

petepete 10y ago
Chrome Dev Tools' editor has great autocompletion, and has done for a very long time. Also, you can 'map' assets to local files so live modifications can be saved without needing to import/export. Dev Tools are what keep me using Chrome at work, they really are unparalleled.

stephenr 10y ago

I know a lot of developers basically treat Google as Jeebus returned, and therefor infallible, but this just seems like unnecessary bloat. What's next, a JS minifier built into Chrome, so 1% of users can use it as an IDE while everyone else just gets more shit they don't need or want?

Kalroth 10y ago
The editor is necessary to the Chrome Developer Tools, since you can edit existing pages and debug the changes. The Code Snippet functionality is however not necessary (in my opinion), but it's such a small part of Chrome Developer Tools that I'm not sure it qualifies as bloat.
skybrian 10y ago
I doubt it adds much to the download size. DevTools already has a copy of the CodeMirror js library for displaying JavaScript in the debugger with syntax highlighting. I suppose you could strip CodeMirror of all editing functionality, but that sounds like more trouble than it's worth.

mxuribe 10y ago

I never knew this; quite handy!!

stefanwlb 10y ago

Are the snippets saved to the google account as well, so that I can access them anywhere I sync my chrome dev browser?

dccoolgai 10y ago

I have always loved Snippets and the whole Chrome Souces ecosystem in general. In fact, I use Sources as my editor of choice over Sublime, Notepad++, etc. I find the "map to local" feature outdoes anything I use from the other editors. Only gripe is I wish snippets were stored as text files (or at least that was an option)... couple weeks ago my Chrome profile got corrupted and I lost like a year of snippets.