投稿日:

    カテゴリー 技術 / デザイン / 制作

    Abobe Edge Inspect

    こんばんわ、燃費の悪いおーみです。
    身体がまったく脂肪を蓄えてくれなくて困ってます。

    Web制作の作業をするようになってデバッグツールないかな〜と探していたらAbobeさんから出ていたので紹介します。

    普段はChromeを使っているので要素を検証から修正と確認作業を行なっていました。

    PCだけならそれで事は足りるのですがスマホ対応となるといちいち
    URLを打ち込んで→確認して→修正して→アップして→確認して
    のエンドレスが結構めんどくさかったりします。

    そんなことを少し思っていたところにヒョッコリあらわれたのがEdge Inspect。
    inspect

    なにができるかというとPCのブラウザで表示しているページを接続している端末画面で同期して表示してくれるんです!

    つまりPCブラウザの操作がそのまま端末側に反映されるということなんですね。
    ページを移動したら端末の方も移動し、タブを切り替えれば切り替えたページを表示してくれます。
    inspect

    しかもちゃんとPCでソースを選択すると端末側で選択部分を表示してくれるすぐれもの。
    リアルタイムでソースの変更も反映されます。
    デバッグPC

    デバッグSP

    ※実際の動きなどは↓の動画で

    PCと端末にアプリをインストールして同じネット環境を使用してお互いを接続してあげればすぐ使えるのでぜひお試しあれ。

    これを使えばメディアアートとかでなにかできそうと思ったりしたのでデバッグ以外でも遊べそうです!

    おわり