デベロッパーツールがさらに便利に！Flexboxの実装と検証が簡単になるFlexboxエディタとオーバーレイが搭載先日リリースされたChrome 90のデベロッパーツールに、Flexboxの実装に役立つ新機能が2つ加わりました！ 1つ目はFlexboxエディタでデバッキングツール、2つ目はFlexboxのオーバーレイ、どちらもWeb制作でFlexboxを使用する時に大活躍すること間違いなしです。
シニアフロントエンド開発者みたいにChromeデベロッパーツールを使おう - Qiita
開発環境にChromeを選ぶなら知っておきたい12のテクニック Photo by Morning Brew on Unsplash さて、何らかの理由で、開発ブラウザとしてChromeを選んだとします。次は、デベロッパーツールを開き、コードのデバッグを開始します。 Consoleパネルを開いてプログラムの出力を確認したり、Elementsパネルを開いてDOM要素のCSSコードを確認したりします。 でも、Chromeデベロッパーツールを本当に理解していますか？実は、パワフルだけど知られていない機能がたくさん用意されていて、開発効率を大幅に改善できるのです。 ここでは、最も便利な機能を紹介します。お役に立てたら嬉しいです。 ChromeのCommandメニューから始めましょう。ChromeのCommandメニューは、LinuxのShellのようなものです。コマンドを入力してChromeを操作で
CSS GridをChrome デベロッパーツールで検証、デバッグする方法を解説
Chrome デベロッパーツールでWebページ上のCSS Gridを検証し、レイアウトの問題をデバッグする方法を紹介します。 Chromeの次のアップデートで予定されている機能で、現在はChrome Canaryで利用できます。 Inspect CSS Grid by Jecelyn Yeen 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様のライセンスの元、翻訳しています。 はじめに Webページ上のCSS Gridを見つける グリッドの表示オプション オーバーレイの表示設定 グリッドのオーバーレイ はじめに このガイドでは、Chrome デベロッパーツールでWebページ上のCSS Gridを検証し、レイアウトの問題をデバッグする方法を解説します。 使用しているCSS Gridのデモページは、下記の2つです。 Fruit box Snack box Webページ
開発体験を変える! 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 を入力することで取得で
【Google Chrome】位置情報を変更してPCの現在地を自由自在に設定
Webブラウザが示す現在地の位置情報を変更したい 現在地の位置情報を必要とするネットサービスを利用していると、実際の現在地とWebブラウザ上での現在地がずれていることがよくあります。特にPCでは珍しくありません。さらには現在地の取得に失敗することすらあります。 PCの場合、この現象はいつまで経っても直らないことが多く、できることならWebブラウザの設定変更で解決したくなります。 その他にもWebブラウザの現在地を変えたくなることはあります。例えばGoogle検索は、現在地によって検索結果を最適化するので、SEO（検索エンジン最適化）では現在地を変えつつ検索結果を確認したくなることがあります。MEO（Map Engine Optimization：マップ検索エンジン最適化）も同様です。 しかし、Webブラウザを実行しているデバイス（端末）を物理的に移動させながら調査していたら、手間も旅費も掛
【2019年4月版】JavaScriptのconsoleがすごいことになってた。 - Qiita
JavaScript の console がすごいことになっているらしい。 本日、以下の記事を見つけました。 Getting creative with the Console API! この記事で紹介されている console のメソッド全然知らなかったのでビックリしましたが、実際にどう表示されるのか載っていなかったのでChromeのコンソールでスクショを取ってみました。 console.log() 本文によるとlogメソッド内のテキストリテラルは以下の書式で値のフォーマットと置換ができるそうです。 %o / %O - for objects; %d / %i - for integers; %s - for strings; %f - for floating-point numbers; マジすか・・・ そんなわけで以下のコード console.log("Object value:
DevToolsメモ
ショートカット一覧 すべてのパネル Ctrl+[, Ctrl+], Ctrl+[1-9]:パネルの移動 Esc: コンソールの表示・非表示 Ctrl+f: 現在開いているファイルやパネルを対象に検索 Ctrl+Shift+f: すべてのファイルを検索 Ctrl+o: ファイル名でファイルを検索 Elementsパネル ←,→:選 択されている要素を開く・閉じる Enter: 選択されている要素の属性を変更する h: 選択されている要素のstyleにvisibility: hidden !important;を付与する F2: 選択されている要素を編集する Esc: 要素の編集を終了する Delete: 選択している要素を削除する D&Dで要素を移動することができる Event Listeners handlerを右クリックでShow Function Definition nodeをマウス
ブレークポイントを使ったJavaScriptデバッグを整理してみた【再入門】 - Qiita
はじめに プログラミングの上達において、デバッグスキルを上げることはとても重要で近道の1つだと考えています。 私自身、勉強し始めた頃に知っていれば（理解できていれば）とよく思います。 今回、JavaScriptデバッグについてChromeDevtoolsとブレークポイントを使った基本パターンを整理しました。 自身の復習かつ、あまり馴染みの無い方でも、以下おおよそ理解できるようになれば良いなぁ、というのが本稿の目的です。 どのようなものにブレークポイントが貼れるのか どういった時にブレークポイントが発動されるのか ブレークポイントが発動されると何ができるのか ご存知の方には特に目新しいことはないかと思いますが、何かのお役に立てば幸いです。 表示・動作はChrome 50.0.2661.87mで確認したものになります(2016-05-11) タブやパネルの位置は環境によって異なる可能性がありま
AndroidのChromeでフロントエンドを高速デバッグ - Qiita
Android の Chrome で Web のフロントエンドがどういう挙動をするかデバッグする時なんかに便利。特に Javascript でスマホ限定のイベントを扱うとかね。 今回は Android の Chrome で加速度センサーの値をリアルタイムで PC 画面に出力してみる。 マニュアルは以下より。 https://developer.chrome.com/devtools/docs/remote-debugging 01. 必要なもの Chrome の入ってる Android 実機 Chrome の入ってる Mac (もちろん Windows でもドライバをインストールすればできる) エディタ (Bracketsなんかだとライブリロードが標準でついていて面白い) Terminal (ローカルサーバーを立てるため) 02. Android の準備 設定 > 開発者向けオプション >
Deb.js·JavaScriptのデバッグを効率化する小さなライブラリ MOONGIFT
最近のWebブラウザの進化によってJavaScript開発はとても便利になっています。ブレイクポイントを差し込んだり、コンソールを使うことでどんどん開発が進められるようになっているでしょう。 そんなJavaScript開発をさらに便利にしてくれそうなソフトウェアがDeb.jsです。ごくごく小さなデバッガーです。 Deb.jsの使い方 Chrome ウェブストアで公開されていますので、インストールします。 こちらがインストール画面です。 インストールされるとDebアイコンが追加されます。 こんな感じでURLに?debjsを追加すると自動で読み込まれるようになります。 任意の関数に.deb()を追加するとスタックとレースされるようになります。 引数や返り値、実行時間などもとれて便利です。 色分けもされるので分かりやすいですね。 開発効率向上を考えると、デバッグ方法は色々知っておいて損はないでし
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
