タグ

ブックマーク / qiita.com/ryo2132 (2)

  • 開発体験を変える! Chrome DevTools Tips 7選 - Qiita

    最近Chrome DevToolsについて調べていて発見した便利機能を紹介します。 誰もが使える最高便利な開発マシンChrome DevToolsを使いこなして開発体験を変えましょう! 1. $0で選択中のDOM要素の取得 特定の要素に何かしたいという時には、要素のIDやclassを確認してConsoleでdocument.querySelector("#xxx")で取得するというのが一般的だと思います。実はそれはカーソル選択と$0で代替できます。 Classや、IDがついていない特定のDOMを取得したい時とかにも使えるので地味に便利です。 手順 カーソルで取得したい要素を選ぶ Consoleタブで$0を入力 最近知ったChrome DevToolsの便利機能① $0 での選択中のDOM要素取得 Elementsタブで選択状態のDOM要素は、Console上で $0 を入力することで取得で

    開発体験を変える! Chrome DevTools Tips 7選 - Qiita
    klim0824
    klim0824 2020/08/18
    ”document.designMode = "on"”
  • 最速で画像を圧縮するAlfred Workflowを作った - Qiita

    はじめに PNGやGIFの圧縮は、ブログ記事やGitHubのPull Requestの実行画像貼り付けとかで割とあります。 自分はTinyPNGやiLoveIMG を利用していましたが、プラウザを開きファイルをアップロード・圧縮しダウンロードという手順が毎回面倒でした。 なので、alfred-imagemin というPNG / JPEG / GIFを手軽に圧縮するAlfred Workflowを作ってみました。 (GIFでも使えるというのが嬉しいポイントです) この記事ではalfred-imageminの概要と、仕組みを紹介します。 ※ Alfred WorkflowAlfredAlfred Powerpackを導入済みの方のみ使える機能です。便利なWorkflowで作業効率爆上がりなので、未導入の方はぜひこの機会に! インストール 以下コマンドでnpmからインストールできます(後述す

    最速で画像を圧縮するAlfred Workflowを作った - Qiita
  • 1