New home page for developer.chrome.com

chrome/docs/devtools-pillar.html

Index: chrome/docs/devtools-pillar.html
diff --git a/chrome/docs/devtools-pillar.html b/chrome/docs/devtools-pillar.html
new file mode 100644
index 0000000000000000000000000000000000000000..00f5bcafb6bb774d3af14e7f39cad6512a1ef6e2
--- /dev/null
+++ b/chrome/docs/devtools-pillar.html
@@ -0,0 +1,234 @@
+{{+content:partials.site}}
+<div class="pillar-content">
+
+  <h1>Chrome Developer Tools</h1>
+  
+  <section class="article-list g-section">
+    <article class="new">
+    <h4 class="label">Styles &amp; the DOM</h4>
+    <h2>Editing Styles and the DOM</h2>
+    <p>
+      Use DevTools to do real-time editing of your web page.  You can edit the DOM directly or the CSS Style and see your changes rendered immediately.
+    </p>
+    <p><a href="docs/dom-and-styles.html">Learn more</a></p>
+    <img src="{{static}}/images/devtools-pillar/dom-pillar.png" alt="these should have alt text">
+    </article>
+    
+    <article class="new">
+    <h4 class="label">Mobile DevTools</h4>
+    <h2>Remote Debugging on Android</h2>
+    <p>
+
+      You can now access your Android device directly in DevTools on your dev machine.  Just plug it in over USB and you can view and debug!
+    </p>
+    <p><a href="docs/remote-debugging.html">Learn more</a></p>
+    <img src="{{static}}/images/devtools-pillar/remote-debugging-pillar.jpg" alt="these should have alt text">
+    </article>
+
+    <article>
+    <h4 class="label">Learn Basics</h4>
+    <h2>DevTools Overview</h2>
+    <p>
+      A starting place if you haven't used DevTools before - this page will tell you everything you need to get started with the Chrome DevTools, from how to access the tools to a brief explanation of what the various menus and panels are used for.
+    </p>
+    <p><a href="index.html">Learn more</a></p>
+    </article>
+
+    <article>
+    <h4 class="label">Command-line debugging</h4>
+    <h2>Using the console</h2>
+    <p>
+      The Javascript console in DevTools can be used to debug your Javascript code and log diagnostics, or you can also just use it as a shell to try out Javascript commands and interact with pages.
+    </p>
+    <p><a href="docs/console.html">Learn more</a></p>
+    <img src="{{static}}/images/devtools-pillar/console-pillar.png" alt="these should have alt text">
+    </article>
+
+    <article>
+    <h4 class="label">Mobile DevTools</h4>
+    <h2>Mobile Emulation</h2>
+    <p>
+      Need to debug for a device but don't have the device on hand?  DevTools can emulate many devices -- screen dimensions, touch events, geolocation, and user spoofing.
+    </p>
+    <p><a href="docs/mobile-emulation.html">Learn more</a></p>
+    <img src="{{static}}/images/devtools-pillar/emulation-pillar.png" alt="these should have alt text">
+    </article>
+    
+    <article>
+    <h4 class="label">Learn Basics</h4>
+    <h2>Keyboard Shortcuts</h2>
+    <p>
+      Save more time in your development workflow -- here is a page full of keyboard shortcuts that will make things quicker when you are using DevTools.
+    </p>
+    <p><a href="docs/shortcuts.html">Learn more</a></p>
+    <img src="{{static}}/images/devtools-pillar/shortcuts-pillar.JPG" alt="these should have alt text">
+    </article>
+
+    <article>
+    <h4 class="label">Performance and Profiling</h4>
+    <h2>Javascript Memory Profiling</h2>
+    <p>
+      Does your page use too much memory or have a memory leak?  Find out how to get and analyze a heap profile.
+    </p>
+    <p><a href="docs/javascript-memory-profiling.html">Learn more</a></p>
+    <img src="{{static}}/images/devtools-pillar/memory-pillar.png" alt="these should have alt text">
+    </article>
+
+    <article>
+    <h4 class="label">Performance and Profiling</h4>
+    <h2>Performance Profiling: Timelines</h2>
+    <p>
+      Is your site running slow?  Analyze times for events, scripting, rendering, and painting using the Timeline.
+    </p>
+    <p><a href="docs/timeline.html">Learn more</a></p>
+    <img src="{{static}}/images/devtools-pillar/timeline-pillar.png" alt="these should have alt text">
+    </article>
+    
+    <article>
+    <h4 class="label">Performance and Profiling</h4>
+    <h2>Javascript CPU Profiler</h2>
+    <p>
+      Find out how much CPU is being spent on your various Javascript functions with the Javascript CPU Profiler.
+    </p>
+    <p><a href="docs/cpu-profiling.html">Learn more</a></p>
+    <img src="{{static}}/images/devtools-pillar/cpuprofiler-pillar.png" alt="these should have alt text">
+    </article>
+    
+    <article>
+    <h4 class="label">Performance and Profiling</h4>
+    <h2>Flame Charts</h2>
+    <p>
+      Flame charts show you a visualization of the call stack of your Javascript functions, and you can quickly find out how long each individual call takes.
+    </p>
+    <p><a href="docs/flame-charts.html">Learn more</a></p>
+    <img src="{{static}}/images/devtools-pillar/flamechart-pillar.png" alt="these should have alt text">
+    </article>
+
+    <article>
+    <h4 class="label">Debugging Tools</h4>
+    <h2>Javascript Debugging</h2>
+    <p>
+      Need to debug your Javascript?  DevTools has a suite of tools to let you step through code, set breakpoints, handle exceptions, and so on.
+    </p>
+    <p><a href="docs/javascript-debugging.html">Learn more</a></p>
+    <img src="{{static}}/images/devtools-pillar/jsdebugger-pillar.png" alt="these should have alt text">
+    </article>
+    
+    <article>
+    <h4 class="label">Command-line debugging</h4>
+    <h2>Console API reference</h2>
+    <p>
+      Javascript functions you can call within the console or within your programs to log various results to the console.
+    </p>
+    <p><a href="docs/console-api.html">Learn more</a></p>
+    </article>
+    
+    <article>
+    <h4 class="label">Command-line debugging</h4>
+    <h2>Command Line API reference</h2>
+    <p>
+      Functions that you can call in the console for performing common tasks within the DevTools.
+    </p>
+    <p><a href="docs/console-api.html">Learn more</a></p>
+    </article>
+    
+    <article>
+    <h4 class="label">Learn Basics</h4>
+    <h2>Tips and Tricks</h2>
+    <p>
+      Various tips and tricks on things within the DevTools.
+    </p>
+    <p><a href="docs/tips-and-tricks.html">Learn more</a></p>
+    </article>
+
+    <article>
+    <h4 class="label">DevTools Reference</h4>
+    <h2>Settings</h2>
+    <p>
+      Let's learn some more about what you can control in the Settings panel.
+    </p>
+    <p><a href="docs/settings.html">Learn more</a></p>
+    </article>
+
+    <article>
+    <h4 class="label">Learn Basics</h4>
+    <h2>Authoring and Development Workflow</h2>
+    <p>
+      Do you find that DevTools saves you some time and you wonder how to save more?  This page guides you through some ways to make your w\
+orkflow more efficient, both in editing files and styles but also with your Javascript and how you use the DevTools in general.
+    </p>
+    <p><a href="docs/authoring-development-workflow.html">Learn more\
+</a></p>
+    </article>
+
+    <article>
+    <h4 class="label">Styles & The DOM</h4>
+    <h2>Working with CSS Preprocessors</h2>
+    <p>
+      Are you using a CSS preprocessor such as Sass, Less, or Stylus?  You can live-edit your preprocessor source files in DevTools as easi\
+ly as editing straight CSS, and enable CSS source maps.
+    </p>
+    <p><a href="docs/css-preprocessors.html">Learn more</a></p>
+    </article>
+
+    <article>
+    <h4 class="label">Mobile DevTools</h4>
+    <h2>Remote Debugging Protocol</h2>
+    <p>
+      Although we encourage you to use the new Screencast for debugging your Android devices, we do have Javascript runtime bindings for al\
+lowing DevTools to interact with mobile Chrome devices.
+    </p>
+    <p><a href="docs/debugger-protocol.html">Learn more</a></p>
+    </article>
+
+    <article>
+    <h4 class="label">Contribute</h4>
+    <h2>Integrating with DevTools</h2>
+    <p>
+      Write new extensions and protocol clients to make new features for Chrome DevTools!
+    </p>
+    <p><a href="docs/integrating.html">Learn more</a></p>
+    </article>
+
+    <article>
+    <h4 class="label">Learn Basics</h4>
+    <h2>Videos</h2>
+    <p>
+      Videos to get you started learning about Chrome DevTools.
+    </p>
+    <p><a href="docs/videos.html">Learn more</a></p>
+    </article>
+
+  </section>
+
+  <section class="g-section g-tpl-33-67" id="further-resources">
+    <h2>Further Resources</h2>
+    <div class="g-unit g-first">
+      <article class="g-content">
+        <h2 class="school">Code School</h2>
+        <p>Explore and master the DevTools with our free "discover DevTools" courses. 
+        <p><a href="http://discover-devtools.codeschool.com/">Learn more</a></p>
+      </article>
+    </div>
+    <div class="g-unit">
+      <div class="g-section g-tpl-50-50">
+        <div class="g-unit g-first">
+          <article class="g-content">
+            <h2 class="chat">Get Involved</h2>
+            <p>Summit a bug or a feature request on DevTools, and help the community get better. 
+            <p><a href="docs/contributing.html">Learn more</a></p>
+          </article>
+        </div>
+        <div class="g-unit g-last">
+          <article class="g-content">
+            <h2 class="puzzle">Debug Extensions</h2>
+             <p>Looking to use the DevTools to debug Chrome extensions? Watch our videos for more info.
+            <p><a href="docs/videos.html">Learn more</a></p>
+          </article>
+        </div>
+      </div>
+    </div>
+  </section>
+
+</div>
+{{/partials.site}}