dev_tools.step

goals do
  goal "Get oriented with your browser's dev tools. They're a great jumping-off point for continuing to build your HTML, CSS, and JavaScript knowledge."
  tip "The screenshots below are specific to the Chrome web browser, which is available for Mac and PC and has great developer tools. But if you're partial to another browser, there's usually a similar set of tools you can use, either built in (Internet Explorer 9, Safari) or installable with plugins (FireFox)."
end

steps do
  
  step do
    message <<-MARKDOWN
      First, you've got to turn on your dev tools. They're hidden by default.

      <img src='img/devtools.png'>

      In Chrome, you can do this by clicking _View > Developer > Developer Tools_.
    MARKDOWN
  end
  
  step do
    message <<-MARKDOWN
      Click on the 'Elements' button to check out your HTML.

      <img src='img/devtools_elements.png'>

      Clicking on an HTML tag in the elements panel will highlight that element in the browser window. It's a great tool for debugging styling problems. On the right side of the panel, you'll even get a list of styles that are being applied to that element.
    MARKDOWN
    tip "Chrome's Elements panel will update to match the state of your DOM as you modify it with JavaScript. Some elements panels don't do this &mdash; they just show what the HTML looked like on page load."
  end

  step do
    message <<-MARKDOWN
      In the 'Network' panel, you can see what other files and resources your HTML page is loading.

      <img src='img/devtools_network.png'>

      If you click on a file name, you can take a look at the contents of that file. This panel is a great place for debugging script linking or loading issues. (You can see HTTP headers and request params here too, with a little digging.)
    MARKDOWN
  end

  step do
    message <<-MARKDOWN
      The 'Console' is the JavaScript developer's secret weapon. It lets you run JavaScript by typing it in directly &mdash; and it runs your scripts _in the context of your page_, so you can interact directly with objects and functions you've defined. It's helpful for debugging and experimenting.

      <img src='img/devtools_console.png'>
    MARKDOWN
  end
  
  step do
    message <<-MARKDOWN
      The 'Sources' panel is another JavaScript pro tool. If you're used to working with an IDE that has a debugger, you'll be able to use many of the same techniques (like breakpoints, stack traces, and watch expressions) right here in the browser.

      <img src='img/devtools_script.png'>
    MARKDOWN
  end
end
  
explanation do

  message <<-MARKDOWN

## Keep Learning with Dev Tools

With good browser dev tools, you can pick apart every website you visit. If you see cool
CSS styles or JavaScript animations, you can always look under the hood and figure out how
they're done. It's a great way to keep learning as a front end developer.

  MARKDOWN
end

next_step 'add_starter_files'
Other Pages

dev_tools.step
