Clarification on external editors and css sourcemap

docs/css-preprocessors.html

@@ -31,7 +31,7 @@
       </li>
      </ul>
 
-<p>Many developers generate CSS style sheets using a CSS preprocessor, such as Sass, Less, or Stylus. Because the 
+<p>Many developers generate CSS style sheets using a CSS preprocessor, such as Sass, Less, or Stylus. Because the
 CSS files are generated, editing the CSS files directly is not as helpful.</p>
 
 <p>For preprocessors that support CSS source maps, DevTools lets you live-edit
@@ -47,44 +47,44 @@ your preprocessor source files in the Sources panel, and view the results withou
 
 <figure class="screenshot"><img src="css-preprocessors-files/sass-sources.png" alt="Sources panel showing .scss file" /></figure>
 
-<p>When you save changes to a CSS preprocessor file in DevTools, the CSS preprocessor should re-generate the 
+<p>When you save changes to a CSS preprocessor file in DevTools, the CSS preprocessor should re-generate the
 CSS files. Then DevTools reloads the newly-generated CSS file. </p>
 
-<aside class="note">Changes made in an <em>external</em> editor are not detected by DevTools until the Sources tab 
-containing the associated source file regains focus.</aside>
+<aside class="note">Changes made in an <em>external</em> editor are not detected by DevTools until the Sources tab
+containing the associated source file regains focus. Also, manual editing of a CSS file generated by the Sass/LESS/other compiler will break the source map association until the page is reloaded.</aside>
 
 <h2 id="toc-requirements">Requirements</h2>
 
 <p>There are a few requirements to note when working with a CSS preprocessor:</p>
 
 <ul>
-<li><p>To use this workflow, your CSS preprocessor must support CSS source maps, specifically the Source Map v3 proposal. The CSS source maps must be built 
-along with the CSS files, so DevTools can map each CSS property to the correct location in the original source file 
+<li><p>To use this workflow, your CSS preprocessor must support CSS source maps, specifically the Source Map v3 proposal. The CSS source maps must be built
+along with the CSS files, so DevTools can map each CSS property to the correct location in the original source file
 (for example, .scss file).</p></li>
 
-<li><p>For the DevTools to automatically reload styles when you change the source file, your preprocessor must be set up to 
-regenerate CSS files whenever a source file changes.  Otherwise, you must regenerate CSS files manually and reload the 
+<li><p>For the DevTools to automatically reload styles when you change the source file, your preprocessor must be set up to
+regenerate CSS files whenever a source file changes.  Otherwise, you must regenerate CSS files manually and reload the
 page to see your changes.</p></li>
 
 <li><p>
-You must be accessing your site or app from a web server (not a <b>file://</b> URL), and 
+You must be accessing your site or app from a web server (not a <b>file://</b> URL), and
 the server must serve the CSS files as well as the source maps (.css.map) and source files (.scss, etc.).
 </p></li>
 <li>
 <p>
-If you are <em>not</em> using the Workspaces feature, the web server must also supply the 
-<code>Last-Modified</code> header. The Python <code>SimpleHTTPServer</code> module provides this header by default. 
+If you are <em>not</em> using the Workspaces feature, the web server must also supply the
+<code>Last-Modified</code> header. The Python <code>SimpleHTTPServer</code> module provides this header by default.
 You can start a web server to serve the contents of the current directory like this:</p>
 <pre class="prettyprint">python -m SimpleHTTPServer</pre>
 </li>
 </ul>
 
-<p>Currently Sass is the only preprocessor that supports CSS source maps, so this document describes how to work with Sass. Working with other preprocessors should be similar. For more information on the status of source map support in other 
+<p>Currently Sass is the only preprocessor that supports CSS source maps, so this document describes how to work with Sass. Working with other preprocessors should be similar. For more information on the status of source map support in other
 preprocessors, see <a href="#toc-css-preprocessor-support">CSS preprocessor support</a>.</p>
 
 <h2 id="toc-enabling-css-source-maps">Enabling CSS source maps</h2>
 
-<p>In Chrome 30 and later, CSS source maps are enabled by default. You can choose to 
+<p>In Chrome 30 and later, CSS source maps are enabled by default. You can choose to
 enable automatic reloading of generated CSS files. </p>
 
 <p><strong>To enable CSS source maps and CSS reload (Chrome 30 and later):</strong></p>
@@ -106,7 +106,7 @@ enable automatic reloading of generated CSS files. </p>
 <li><p>Turn on <b>Support for Sass</b> (or <b>Sass stylesheet debugging</b>, depending on the browser version you're using).</p></li>
 <li><p>Click <b>General</b>.</p></li>
 <li><p>Turn on <b>Auto-reload CSS upon Sass save</b>.</p>
-<p>If necessary, you can adjust the <b>Timeout</b> setting, which specifies the delay between the time you 
+<p>If necessary, you can adjust the <b>Timeout</b> setting, which specifies the delay between the time you
 update a source file and the time that the browser reloads the CSS files. <b>Timeout</b> is specified in milliseconds,
 and defaults to 1000 (1 second).</p>
 <p>This timeout is eliminated in newer versions of Chrome.</p></li>
@@ -138,8 +138,8 @@ and defaults to 1000 (1 second).</p>
 
 <h2 id="toc-how-css-source-maps-work">How CSS source maps work</h2>
 
-<p>For each CSS file it produces, the preprocessor generates a <a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">source map</a> file (.map file) in addition to the compiled CSS. The source map file is a JSON file that 
-defines a mapping between each generated CSS declaration and the corresponding line of the source file. Each CSS file contains an annotation that specifies the URL of its source map file, embedded in a special comment on the 
+<p>For each CSS file it produces, the preprocessor generates a <a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">source map</a> file (.map file) in addition to the compiled CSS. The source map file is a JSON file that
+defines a mapping between each generated CSS declaration and the corresponding line of the source file. Each CSS file contains an annotation that specifies the URL of its source map file, embedded in a special comment on the
 last line of the file:</p>
 
 <pre class="prettyprint">
@@ -166,7 +166,7 @@ h2 {
 h2 {
   font-size: 26px;
   color: red;
-  background-color: whitesmoke; 
+  background-color: whitesmoke;
 }
 /*# sourceMappingURL=styles.css.map */
 </pre>
@@ -184,8 +184,8 @@ h2 {
 
 <h2 id="toc-resources">Resources</h2>
 
-<p>Many users have developed their own workflows using CSS preprocessors. 
-See the following external articles for tutorials and alternate workflows. 
+<p>Many users have developed their own workflows using CSS preprocessors.
+See the following external articles for tutorials and alternate workflows.
 </p>
 
 <ul>