technology

Chrome mapping to local workspace resources tutorial.

Introduction

This tutorial outlines a technique using the Chrome browser, that allows you to map webapp resources to local copies of your resources.

In this tutorial – I will demonstrating this technique for the purpose of modifying .scss and .css resources.

Effectively – the Chrome browser will use your local copies of the resources to render the webpage. This will allow you to modify your version controlled resources in the browser developer tools, and see the changes immediately.

No more tweaking in the browser and then copying to version controlled resources. No more redeploying each time want to see your changes. This may greatly quicken your development process.

Prerequisite Understanding.

For this tutorial I assume you are generally familiar with creating webapps, deploying to web servers  and working CSS and SCSS. If you don’t know Sass/SCSS don’t worry – it’s very simple, and you should learn it, because it’s awesome.

In this tutorial I’m deploying a Java webapp to Tomcat 8, and I’m using Maven for my dependency management and deployment.

If you’re not using these technologies, don’t be too worried, so long as you know how deploy your own webapp.

Project Structure

Here’s what my webapp currently looks like:

webapp.PNG

Here’s the project structure:

structure.PNG

And here’s the code:

index.html
<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" type="text/css" href="scss/style.css">
</head>

<body>

this is a div

<span> this is a span</span>
</div>

this is a div

<span> this is a span</span>
</div>

</body>

</html>

style.scss
@import 'foo';

@import 'bar';

body {
background-color: #f2f2f2;
padding: 50px;
}


foo.scss
.foo {
background-color: green;
padding: 20px;
font-weight: bold;

div {
background-color: yellow;
}

span {
background-color: orange;
}
}

**bar.scss**


.bar {
border: solid 2px black;
}

Deployment

  1. First I need to compile the css.
    >sass compile style.scss style.css
  2. Now I deploy using maven
    >mvn tomcat7:deploy

Making changes the hard way

Let’s say I want to add some spacing between those two divs, and also I want to make it so all the children of the bar div also have borders.

I’ll probably do something like this:

I’ll add margin: 10px 5px; to .foo.

And I’ll add


> * {
border: 1px solid white;
}

to .bar.

I now recompile the .css

sass compile style.scss style.css

and undeploy, redeploy my app

mvn tomcat7:undeploy

mvn tomcat7:deploy<

web2.PNG

Success.

There’s a much easier way to do this though.

Introducing: Chrome resource mapping

1. Configure chrome

Open chrome

  • Navigate to chrome://flags
  • Enable Developer Tools Experiments (about halfway down the page)
  • Restart chrome.
  • F12 -> Developer Tools settings
  • Enable CSS source maps.

2. Get SASS compiling and watched

sass –watch style.scss:style.css

3. Map the CSS in Chrome

  • Open chrome
  • Navigate to your deployed webapp.
  • F12
  • Sources tab
  • Right click in the sources folder structure white space -> add folder to workspace

workspace

  • Add your local assets workspace.
  • Find websites style.css
  • Right click – >map to file system resource

map

  • Select the corresponding style.css that’s in your local workspace.

4. Modify your .scss in chrome

  • Open a *.scss file in the chrome workspace
  • Make some changes.

pink.PNG

  • Boom! Your changes instantly took place, and are already in your version controlled files.

This is much easier isn’t it?

Advertisements