RSS

Using Google Chrome As A Simple Web Text Editor

11 Mar

All web developers have awesome text editors or beyond text editors which we call IDEs which do many services such as Visual Studio, Web Storm, Sublime….. (names are a very few here).
However when we develop websites when it comes to debugging many developers use either firebug or chrome devtools. These tools also allows you to do “live edit” which is very compelling. For chrome devtools most of the time the work flow is as follows,
• Using chrome devtools edit CSS, JavaScript etc. within chrome devtools itself
• Copy the edited CSS,JavaScript etc from chrome devtools and copy paste to corresponding source files in the disk
However above workflow bit annoying but most of the time developers live with. The reason is it is not only additional work but error prone thing where you might miss certain lines of code from copy pasting process especially if you edit multiple source files through chrome devtools.

What you can do is to use Chrome devtools “workspaces” feature. In summary what workspaces allow you to save edited CSS, Javascript into the disk through chrome devtools itself which by removing additional step of copy pasting them into source files which is the annoying and error prone step. If you wonder how this is possible you just map your location of source files to disk. Yes this might not always work for all virtual folders but most of the time it will.

First step is to open chrome devtools and right click on source tabs white area as shown below.
add-workspace

Clicking on Add Folder to workplace will open OS file/folder browser.

browse-local-folder

After you do it, the edits you do will be persistable to your disk right from chrome devtools it self(with Ctrl + S)
3. save to disk after edit

There are number of other operations you could do such as deleting files, duplicating souce files… etc. from chrome dev tools, if you just right click on the source file in “Sources” tab you will see some of these options.

Advertisements
 
Leave a comment

Posted by on March 11, 2015 in Dev tools

 

Tags: , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: