Clever Geek Handbook

テスターに​​役立つDevTools機能

みなさん、こんにちは！私の名前はMishaです。私は手動テスターまたは手動QAの立場で働いています。誰にとっても便利だからです。私の仕事では手動テストが普及しているため、ブラウザーで開発者のコ​​ンソールに出くわすことがよくあります（Webテスターの99.9％と同じだと思います）。 





開発者とテスターの両方のために、DevToolsに関する情報を見つけることができるインターネット上の多くのソースがあります。もちろん、そのような記事の内容は、その焦点によって大きく異なります。そのような資料を大量に研究し、私たち（テスター）が情報を奪われていることに気付いた:)、私は開発者のツールを完全に研究するために一次資料に行くことにしました。膨大なメニューのすべての項目を調べて、テスターに​​とって興味深い（読むのに役立つ）約20の項目を自分で書きました。各ポイントに添付される記事で詳しく説明されているため、この記事では、このツールまたはそのツールの使用方法については説明しません。私の話の目的は、DevTools機能の膨大なリストから分離することです。これはQAスペシャリストに役立ちます。私はそのトピックの客観性と完全な開示を装うつもりはありませんが、そうしようと思います。 





PS：リストの項目の順序は、それらの重要性を示していません。





  1. エミュレーションandroidとios、デバッグ時にandroidを接続します。





    現在、モバイルデバイス向けの製品を製造しているほとんどの企業は、製品の完全なテストに必要なデバイスのフリートを持っているように思われます。しかし、誰もがこれにお金を使う必要があると考えているわけではありません。また、特定のデバイスで製品をテストする必要性は、この製品が携帯電話用であるかどうかに必ずしも依存しません。この点で、物理的な存在なしにモバイルデバイスでサイトをチェックする必要があります。このアプローチの欠点は、これらのエミュレーターのほとんどが商用であるということです。  





    2番目のサブアイテムを使用すると、エミュレーターを使用せずにAndroidデバイスで製品のすべての要求と動作を追跡できます。これは、製品をコンピューターに接続し、少量の操作を実行するだけです。また、この方法の利点は、このタイプの接続を介してローカルサーバーへのアクセスを構成できることです。





  2. ジオロケーションの再定義とUser-Agentの置換。





    DevTools . () . , - , . User-Agent , - . , User-Agent .





    ユーザーエージェントの置換
    User-Agent

  3. JS .





    , . JS, . , , , , , , DevTools .





  4. CSS .





    , - . . , (, , ..), , , “live” .





    要素ボックスのサイズ変更の例

  5. CSS Javascript .





    , web-. , “” , , , , , .





    コードカバレッジレポート

  6. debug JavaScript.





    , - , . , , . . , JavaScript, , , . , , , . 3 Chrome. , , , .





  7. Chrome .





    DevTools ( 65 ). , CSS , . , , , , .





  8. .





    DevTools, , . , 90% , , , , , , , . , , .  .





    接続速度の選択

  9. Network.





    , DevTools . , .





    ネットワークで可能な列のリスト
    Network

  10. .





    , . , , , .





  11. .





    , , . , , , , .





  12. cookies applications.





    Cookies - , , () , , -, . (, , ).





: 





( ), , , , : 





  • shortcuts, chrome DevTools; 





  • ; 





  • ; 





  • xhr ; 





  • ; 





  • JavaScript ; 





  • , network.





もちろん、DevToolsは上記で説明した機能に限定されません。パフォーマンスと監査と呼ばれる非常に興味深いタブがありますが、DevToolsでこれらのタブを読んで理解することが一般的に興味深い場合は、別の記事のトピックと見なすため、この情報はまだロードしていません。





ご清聴ありがとうございました！







More articles:


All Articles