{% extends "layout.html" %}
{% block title %}Diagnose A Webcompat Issue{% endblock %}
{% block body %}
<div>
  {% include "nav/nav.html" %}
  <main role="main">
    <section class="grid grid-show-gap">
      <div class="grid-row">
        <aside class="grid-cell x1-fix">
          {% include "contributors/sub-nav.html" %}
        </aside>
        <div class="grid-cell x1">
          <section>
            <h1 id="diagnose" class="headline-1 heading">Diagnose A Webcompat Issue</h1>
            <p>
              Someone has <a href="/contributors/report-bug">reported a bug</a>. It has been successfully triaged. The issue is now in the <a href="/issues?page=1&amp;per_page=50&amp;state=open&amp;stage=needsdiagnosis&amp;sort=created&amp;direction=desc">needs diagnosis list</a>. You can help!
            </p>
        </div>
      </div>
    </section>
    <section class="grid">
      <div class="grid-row">
        <div class="grid-cell x3">
            <h2 id="neutral" class="headline-1 heading">Have A Neutral Test Environment</h2>

            <p>
              To successfully diagnose each issue, you will generally want to start with a fresh user profile for the browser you are testing. This helps minimize the potential for unrelated issues to complicate the diagnosis or make the reported issue irreproducible (especially from browser extensions and other customizations). For example, on Firefox you can <a href="http://www.otsukare.info/2014/11/12/configure-webcompat-browser" target="_blank">create a profile which resets each time the browser restarts</a>.
            </p>
        </div>
      </div>
    </section>
    <section class="grid">
      <div class="grid-row">
        <div class="grid-cell x3">
            <h2 id="skills" class="headline-1 heading">Develop Competencies, Have Impact</h2>
            <p>
              <a href="/issues?page=1&amp;per_page=50&amp;state=open&amp;stage=needsdiagnosis&amp;sort=created&amp;direction=desc">Pick up an issue from the list</a> and begin analyzing why it happens. The more issues you analyze, the more familiar you will become with browser developer tools, web site coding practices, web specifications, and just how subtle and whimsical web compatibility issues can be.
            </p>

            <p>
              You could very well end up filing issues on browsers' bug trackers, interacting with their developers and web standards experts. And ultimately, the web will be a better place thanks to your effort.
            </p>
        </div>
      </div>
    </section>
    <section class="grid">
      <div class="grid-row">
        <div class="grid-cell x3">
            <h2 id="verbose" class="headline-1 heading">Be verbose</h2>
            <p>
                Provide as much detail as possible during your analysis. Your thought process while diagnosing an issue is as important as your final conclusion. The more quickly the issue can be fully understood, the more quickly its fix may be negotiated by the folks doing site outreach.
              </p>
          </section>
        </div>
      </div>
    </section>
  </main>
</div>
{% endblock %}
{%- block extrascripts -%}
<script type="module" src="{{ url_for('static', filename='dist/contributors.js')|bust_cache }}"></script>
{%- if config.PRODUCTION or config.STAGING -%}
<script nomodule src="{{ url_for('static', filename='dist/contributors.es5.js')|bust_cache }}"></script>
{%- endif %}
{%- endblock %}
