開発者デベロッパー版

数日前、私はOl ' Faithful、Mozilla Web Docsに精通しているように、私は1つのMozillaの新しいプロジェクトに遭遇しました-「開発版」ブラウザ.

さて、明らかにOLE '信頼性、Google Chromeと何も間違っている.クロムのdevtoolは、任意の開発者のツールボックスで最も不可欠なツールの一つです.
それでも、私は光る新しいもののための吸盤であるので、私は数分downloading the browserを無駄にすることに決めて、その名前と評判を生き残るためにそれに公正なショットを与えました.つまり、どのように、私は我々にMDN Docsを与える人々から、「開発版」と烙印を付けられる何かに抵抗することができましたか?
だから、長い話を短くするために、私はちょうど出てきて、それを言います.Firefoxの開発者版DevToolsは、偉大な読み取りと直感的な感じのデザインを持っており、間違いなく任意のツールボックスに歓迎の追加です.それも、どのようにデバッガに組み込まれて使用することを学ぶために私にインスピレーション!
Mozillaは便利なダンディdebugger playgroundを提供していますいくつかのスターターの例を介してガイドを行うには、単純なリストの反応アプリ.

DevToolsを右クリックして検査要素を選択して開くことができます.これは、通常、ブラウザウィンドウの側にdevtoolsを開くでしょう.以下のように:

デバッガの上部で、デバッガをクリックすると、3つのペインが表示されます

ソースリストとソースペイン

ソース一覧ペインには、現在のページまたはプロジェクトに関連するすべてのJavaScriptファイルが表示されますが、ソースペインにはこれらのファイルの内容が表示されます.すべての目的と目的のために、我々はそれをVisual Studioコードのように、我々の典型的なエディタと非常に同様に考えることができます.
左側のペインは、ファイル全体の位置と、それらの相対的な構造を、アプリケーション全体に関連して記述し、その右側のペインは、ソースリスト内で選択されているファイルのいずれかを垣間見ることができます.

工具枠

一番左のペインは、ツールペインで、Firefoxが私たちに与える便利なツールの多くです.からアクセスできます.特定のウォッチ式とスコープタブは便利なので、任意の時点で、任意の時点で、任意の変数を表示するには、ブレークポイントのおかげで表示することができます.

ブレークポイントは、ソースの溝のライン番号をクリックして挿入されます.これは、上記のように青い旗でそれをマークしなければなりません.今、アプリケーションが実行されるたびに、それはラインを右に青ブレークポイントフラグでマークを停止します.
この場合、アイテムをto doリストに追加しようとすると、プログラムがフリーズします.

これは、ツールペイン、特にツールバーについてもう少し詳しく説明するのに良い時間かもしれません.

ツールバー

再生/一時停止

は、デバッグされているコードの実行を一時停止または再開します.これは、ブレークポイントを押した後にコードを実行し続けるとき、または次のブレークポイントにすばやく移動するときに便利です.

* tl;dr – used for stopping and starting the execution of the code in question

ステップオーバー

は、挿入されたブレークポイントの直後の次の行を実行します.次の行が関数であれば、関数全体を実行します.

* tl;dr – used for taking the next "step" single step down your code

ステップイン

が「段階的」であるならば、1つは代わりに「段階的に」ことができて、一度にすべての代わりにラインによって機能線を実行することができます.

* tl;dr – used for "stepping into" functions and slowly working your way down its execution line-by-line

ステップアウト

関数からステップし、別のブレークポイントまたは完了までコードを実行します.

* tl;dr – used for getting out of the scope of a function and letting it run. 

表情を見る

ウォッチ式タブはまた、それ自身の権利の非常に便利なツールです.式または変数をタブに入力することで、その式がデバッガツールバーを使用して、行ごとに値を取得または変更するようになります.

スコープ

スコープは、より簡単にコードをデバッグすることができます別の信じられないほどシンプルで便利なツールです.あなたのコードのどんなブレークポイントででも、上記のWatch式タブと同様に、あなたの関連スコープはあなたに示されます.
devtoolsが提供する多くがあります、そして、ユーザー経験が行く限り、私はこのMozillaブラウザーで幸せで、売られます.念頭に置いて、しかし、それはまだ開発モードにあると私は自分自身が任意のグリッチや落とし穴は、アプリケーションを使用していないが、常にオープンマインドを何か奇妙なことが起こることができます保つことはありません.しかし、DEVSとして、我々はバグまたは2つを扱うことができると思います.