<commit_before>{# This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/. #}

{% extends "/firefox/base.html" %}

{% block page_title %}Built with Cutting-Edge Technology{% endblock %}
{% block body_id %}firefox-technology{% endblock %}

{% block site_css %}
  {{ css('firefox_technology') }}
{% endblock %}

{% block content %}


<div id="main-feature">
  <div class="row">
  <hgroup class="stacked">
    <h1>肇始於<span class="large">開放技術</span></h1>
    <h4>創新的強大功能，完全改變 Web 的建構方式</h4>
  </hgroup>

  <aside id="more-info">
    <h5>更多資訊</h5>
    <ul>
      <li><a href="https://developer.mozilla.org/demos">Demo Studio</a></li>
      <li><a href="{{ url('firefox.performance') }}">輕鬆客製化</a></li>
      <li><a href="https://developer.mozilla.org/">Mozilla 開發者社群網站 (MDN)</a></li>
    </ul>
  </aside>

  {{ download_firefox(small=True) }}

  </div>
</div>

<nav class="menu-bar billboard">
  <ul>
    <li><a href="#tools">開發者<span>工具</span></a></li>
    <li><a href="#html5">HTML5<span> 引領創新</span></a></li>
    <li><a href="#css">CSS<span> 徹底美化</span></a></li>
    <li><a href="#apis">APIs<span> 前衛概念</span></a></li>
    <li><a href="#svg">SVG<span> 強悍演進</span></a></li>
    <li><a href="#security">高階<span>安全性</span></a></li>
  </ul>
</nav>

<div id="wall">
<section>

<article id="tools" class="article container divider">

<p class="top-link"><a href="#main-feature">Return to Top</a></p>

<div class="click-star"><span>滑鼠游標移過各區塊即可觀看範例。</span></div>

<div class="intro">
    <h1>開發者<span>工具</span></h1>
    <p>你曾想過 Web 運作的方式？想動手修改相關設計與程式碼？Firefox 開發者工具可讓你看穿網頁背後的機制，而能進行 Web 的除錯、優化、測試。</p>
</div>

<article>
    <div class="demo">
        <img src="{{ media('img/firefox/technology/tools-style-editor.png') }}" alt="Style Editor screenshot" />
    </div>
    <h1>樣式編輯器</h1>
    <p>樣式編輯器 (Style Editor) 可輕鬆測試、修改網頁的外觀。你可變更任何網頁的設計，且只要修改樣式表，就能立刻看到相關結果。可至「網頁開發者」選單中找到此功能。</p>
</article>

<article>
    <div class="demo">
        <img src="{{ media('img/firefox/technology/tools-debugger.png') }}" alt="Debugger screenshot" />
    </div>
    <h1>除錯器</h1>
    <p>在原始碼編輯器中設定中斷點之後，只要暫停、執行、觀看指令碼的執行作業，即可迅速找出 JavaScript 碼中的問題。所有指令碼均列在選單之上，你只需輸入檔案的部分名稱就可跳選該檔案。另針對 Firefox OS 與 Firefox for Android，亦支援遠端除錯功能。</p>
</article>

<article>
    <div class="demo">
        <img src="{{ media('img/firefox/technology/tools-mobile.png?2013-06') }}" alt="Mobile developer tools screenshot" />
    </div>
    <h1>行動開發者工具</h1><commit_msg>Fixed missing return to top translation.<commit_after>{# This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/. #}

{% extends "/firefox/base.html" %}

{% block page_title %}Built with Cutting-Edge Technology{% endblock %}
{% block body_id %}firefox-technology{% endblock %}

{% block site_css %}
  {{ css('firefox_technology') }}
{% endblock %}

{% block content %}


<div id="main-feature">
  <div class="row">
  <hgroup class="stacked">
    <h1>肇始於<span class="large">開放技術</span></h1>
    <h4>創新的強大功能，完全改變 Web 的建構方式</h4>
  </hgroup>

  <aside id="more-info">
    <h5>更多資訊</h5>
    <ul>
      <li><a href="https://developer.mozilla.org/demos">Demo Studio</a></li>
      <li><a href="{{ url('firefox.performance') }}">輕鬆客製化</a></li>
      <li><a href="https://developer.mozilla.org/">Mozilla 開發者社群網站 (MDN)</a></li>
    </ul>
  </aside>

  {{ download_firefox(small=True) }}

  </div>
</div>

<nav class="menu-bar billboard">
  <ul>
    <li><a href="#tools">開發者<span>工具</span></a></li>
    <li><a href="#html5">HTML5<span> 引領創新</span></a></li>
    <li><a href="#css">CSS<span> 徹底美化</span></a></li>
    <li><a href="#apis">APIs<span> 前衛概念</span></a></li>
    <li><a href="#svg">SVG<span> 強悍演進</span></a></li>
    <li><a href="#security">高階<span>安全性</span></a></li>
  </ul>
</nav>

<div id="wall">
<section>

<article id="tools" class="article container divider">

<p class="top-link"><a href="#main-feature">回到頂端</a></p>

<div class="click-star"><span>滑鼠游標移過各區塊即可觀看範例。</span></div>

<div class="intro">
    <h1>開發者<span>工具</span></h1>
    <p>你曾想過 Web 運作的方式？想動手修改相關設計與程式碼？Firefox 開發者工具可讓你看穿網頁背後的機制，而能進行 Web 的除錯、優化、測試。</p>
</div>

<article>
    <div class="demo">
        <img src="{{ media('img/firefox/technology/tools-style-editor.png') }}" alt="Style Editor screenshot" />
    </div>
    <h1>樣式編輯器</h1>
    <p>樣式編輯器 (Style Editor) 可輕鬆測試、修改網頁的外觀。你可變更任何網頁的設計，且只要修改樣式表，就能立刻看到相關結果。可至「網頁開發者」選單中找到此功能。</p>
</article>

<article>
    <div class="demo">
        <img src="{{ media('img/firefox/technology/tools-debugger.png') }}" alt="Debugger screenshot" />
    </div>
    <h1>除錯器</h1>
    <p>在原始碼編輯器中設定中斷點之後，只要暫停、執行、觀看指令碼的執行作業，即可迅速找出 JavaScript 碼中的問題。所有指令碼均列在選單之上，你只需輸入檔案的部分名稱就可跳選該檔案。另針對 Firefox OS 與 Firefox for Android，亦支援遠端除錯功能。</p>
</article>

<article>
    <div class="demo">
        <img src="{{ media('img/firefox/technology/tools-mobile.png?2013-06') }}" alt="Mobile developer tools screenshot" />
    </div>
    <h1>行動開發者工具</h1>
{'fraction_non_alphanumeric': 0.21726422447388932, 'fraction_numerical': 0.010132501948558068, 'mean_word_length': 4.2217700915564595, 'pattern_counts': {'":': 0, '<': 229, '<?xml version=': 0, '>': 229, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3514459', 'n_tokens_mistral': 2516, 'n_tokens_neox': 2631, 'n_words': 364}