開発環境にChromeを選ぶなら知っておきたい12のテクニック Photo by Morning Brew on Unsplash さて、何らかの理由で、開発ブラウザとしてChromeを選んだとします。次は、デベロッパーツールを開き、コードのデバッグを開始します。 Consoleパネルを開いてプログラムの出力を確認したり、Elementsパネルを開いてDOM要素のCSSコードを確認したりします。 でも、Chromeデベロッパーツールを本当に理解していますか？実は、パワフルだけど知られていない機能がたくさん用意されていて、開発効率を大幅に改善できるのです。 ここでは、最も便利な機能を紹介します。お役に立てたら嬉しいです。 ChromeのCommandメニューから始めましょう。ChromeのCommandメニューは、LinuxのShellのようなものです。コマンドを入力してChromeを操作で
最近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 を入力することで取得で
この記事について Webエンジニアになって早１年半。railsのデバッグをする時にはエディターのデバッガーでスマートにできていたが、javascriptになるといつもconsole.log();ばかりを使って原始的なデバッグをしていた。。。 そんな脳筋な過去の自分に教えてやるための記事です。 console.log({変数名}); 「いきなりconsole.log();の紹介かい！！！」って思われるかもしれませんが、この技を知ったときは「なんで知らんかったんや。。。」って思うくらい便利だったので最初に紹介します。 以下のようなHTMLがある場合 <form> <input type="text" value="名無しの権兵衛" id="name"> <input type="text" value="80歳" id="age"> <input type="text" value="バスケ"
「ディスプレイの脇のアヒルちゃんに説明することでバグに気づき、品質を高める」#ラバーダックデバッグ という手法があるけど、絵面だけでも草ｗ
なかめのくまちゃん@質問アプリQuerie.me開発者 @wgextra 「ディスプレイの脇に置いたアヒルちゃんに実装した処理を一行ずつ説明する中で実装者自らがバグに気づき、デバグして品質を高める」ラバーダックデバッグっていう手法があるんだけど、絵面だけでも草なのにどうやらマジで効果絶大らしく、もうこんなん大草原不可避だわ。アヒルちゃん買ってこよ。 pic.twitter.com/80zqajvdPV 2020-07-05 10:24:15
特定の端末のみで起こる WebView プチフリーズを Tracing を利用して追った話 - SmartNews Engineering Blog
こんにちは、スマートニュース株式会社の紀平です。 SmartNews のアプリ内では、最近 WebView を使った機能を多数公開しております。そのうちの一つにショッピングチャンネルという機能があるのですが、今日はそのショッピングチャンネルのタイムセール枠で以前発生した、謎のプチフリーズ問題の調査手法をご紹介します。 tl;dr 特定の Android 端末でプチフリーズが発生した 再描画領域を減らすことで現象は改善した Chrome の Tracing 機能を利用し、ブラウザのソースコードまで参照して、ついに根本原因まで突き止めた タイムセールで起こった問題 タイムセールは、SmartNews のショッピングチャンネル内において WebView で提供されている、期間限定のお得な商品をアグリゲーションした機能です。EC サイト各社のご協力の上にご提供しております。内部は HTML5 で開
Update 2024-03-30: Chrome 123 から "Emulate a focused page" が追加された。 これを用いれば良いため、以降の全ての方式は古くなった。 Apply other effects: enable automatic dark theme, emulate focus, and more https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_a_focused_page マウスが乗ってないと出ない UI も、そこに Tab などでフォーカスを移し、その状態で Dev Tools の "Emulate a focused page" を有効にすれば良い。 Intro 先日、後輩が「mouseover 中にしか表示されない DOM のデバッグ」に手こずっ
数列の和を求めるプログラムを作成することになり、意気揚々と以下のようなプログラムを書いたという状況を想像して下さい。 function sum(nums, acc = 0) { if (nums.length === 0) return 0; if (nums.length === 1) return nums[0]; return sum(nums.slice(1), acc + nums[0]); } const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; console.log(sum(nums)); // expected: 55 一見すると何も問題なさそうに見えるプログラムですが、実はバグがあります (皆さん分かりますか?) *1。実際に上記プログラムを実行すると 55 ではなく 10 が出力されます。 こうした場面に遭遇すると、自然と sum
先日リリースされたChrome 90のデベロッパーツールに、Flexboxの実装に役立つ新機能が2つ加わりました！ 1つ目はFlexboxエディタでデバッキングツール、2つ目はFlexboxのオーバーレイ、どちらもWeb制作でFlexboxを使用する時に大活躍すること間違いなしです。
連載目次 前回は、mymath.pyファイルにフィボナッチ数を求める関数を3つ定義しました。今回は、Visual Studio Code（以下、VS Code）を使って、それらのコードを実行したり、デバッグしたりする手順を見ていきましょう。 コードの説明 まずは前回記述したコードを以下に示しておきます。これはmymath.pyファイルに記述しました。 def fib(n): if n == 0: return 0 if n == 1: return 1 return fib(n - 2) + fib(n - 1) def fib_l(n): a = 0 b = 1 if n == 0: return a elif n == 1: return b for _ in range(n - 1): a, b = b, a + b return b def fib_m(n, memo=None):
CSSはWebページの見た目を整えるものですが、ちょっと違う使い方もできます。たとえば、予期せぬ横スクロールが発生した時、以下のようにすることで全ての要素のアウトラインが表示され、不用意にはみ出している部分が視覚的に分かりやすくなります。 * { outline: 2px solid red; } これを応用してタグの不適切な利用部分をハイライトできます。 このような不適切なタグ利用を検知して警告する「デバッグCSS」を作ってみました。このようなCSSをLintのようにする使い方は#lintHTMLwithCSSのハッシュタグで海外でも考案されています。仕様上許可されないものは赤色で点滅、ダメではないが、やらない方がベターなものは黄色で点滅するようになっています。 当記事では下記のデモを見ながらだと理解を深めやすいので、合わせて読むことをオススメします。 サンプルを別ウィンドウで開く コー
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ページ
実例で学ぶ MySQL/MariaDB デバッグ - nayuta-yanagisawa's blog
この記事では、MySQL/MariaDB のバグを修正するための典型的な手順を、具体例を通して解説する。次の MariaDB のバグを例として取り上げるが、基本的なデバッグの手順は MySQL でもまったく同様である。 MDEV-24868: Server crashes in optimize_schema_tables_memory_usage after select from information_schema.innodb_sys_columns なお、MySQL/MariaDB のデバッグ方法についての包括的な解説を与えるのは、この記事のスコープ外である。デバッグ手法の詳細を知りたい場合は、以下の一連の記事を参照してほしい。 Debugging MySQL/MariaDB (1): Build and Test Debugging MySQL/MariaDB (2): DBU
Rubyでdebug用のloggerをお手軽低コストに仕込む
まとめproduction での実行記録をちゃんと残すという意味ではなく（なんか変かも？）と思って調べる時やテスト実行時に役に立つ debug 用の logger の設定方法をまとめるlogger の block 記法と caller が便利Loggerのblock記法はRails GuideでImpact of Logs on Performanceとして紹介されているDebugging Rails Applications — Ruby on Rails Guides 曰く
レスポンシブWebデザイン対応のWebサイト開発に特化したオープンソースのWebブラウザ・「Responsively」
ResponsivelyはRWDの開発に特化したWebブラウザです。オープンソースとしてソースコードも公開されています 各スマホのデバイスやタブレット、PCなど異なるデバイスでどのように表示されるかを一括確認できる、というもの Electronベースとなっています。試しに使ってみました こんな感じで設定した各デバイスで指定したWebページが表示されます。スクロールやページの移動は全ウィンドウで連動しています。 ↑ インスペクタもついており、その場で編集、表示確認等を行う事が出来ます ↑ また、全デバイスのフルスクリーンショットもワンクリックで可能となっています。もちろん各デバイス単位でも撮影可能。撮影されたSSはドメイン、日付、撮影した時間を名前としたファイル名やフォルダ名で保存されますので上書きする心配もありません 尚、デバイスはかなりの量が用意されているのでお好みに合わせてウィンドウを
Android11でワイヤレスデバッグという新しい機能が追加されました。 今までAndroid実機をADB経由で操作する際、USBケーブルで繋ぐ必要がありましたが、それをWi-Fi経由で接続できるようになった機能です。 参考 Google Developers Japan: Android 11: Developer Preview 3 機能と API の概要 | Android デベロッパー | Android Developers ワイヤレスデバッグの有効化 ワイヤレスデバッグは開発者オプションから有効化できます。 開発者オプションが表示されない方は、デバイスの開発者向けオプションを設定する | Android デベロッパー | Android Developers を参考に開発者オプションの表示を有効化してください。 開発者オプションを開くと、デバッグメニューに表示さ
Ｃｙｇａｍｅｓ（東京都渋谷区、渡辺耕一社長）は、人工知能（ＡＩ）技術でゲームデバッグシステムを確立した。ＡＩがスタッフの代わりにカードゲームを行い、極まれに起こる不具合を探す。ゲームをするＡＩとゲーム環境と同一のミラー環境を構築した。２７００人分の作業を新卒１年目のエンジニア１人で運用できるようになった。育成シミュレーションゲームなど適用範囲を広げていく。 研究部門のサイゲームスリサーチがシステムを構築した。まず人間のようにプレーするＡＩを開発した。完全に匿名化されたプレーデータをＡＩに学習させ、カードゲームにおける常識を身に付けさせる。このＡＩにランダムな要素を加えて、プレーヤーが選びそうな手よりも、広い打ち手の範囲を選ばせる。 デバッグＡＩ用にカードゲーム「シャドウバース」のシステムと同じミラー環境を構築した。このミラー環境で９００アカウント分のＡＩが２４時間３６５日プレーする。 アカ
在宅勤務で手元にない端末でのアプリのデバッグをするために準備しておくこと - Infinito Nirone 7
コロナ禍で在宅勤務が一気に広まり、自宅でアプリの開発やリリースをすることが多くなりました。この状況のなかで、アプリの挙動に問題があるなどで動作確認をしようと思うとき、その問題に対処するためのデータを集めたり、問題が発生したときの状況を確認するための手立てを持っておく必要があります。この記事では、手元にない端末で起きる問題のトラブルシューティングをしやすくするために準備しておくとよいことを書き残しておこうと思います。 端末のログを収集する ある端末でアプリがクラッシュしたときに、そのスタックトレースを記録しておくことはとても重要ですが、そのクラッシュにいたるまでに何があったかをログとして収集しておくことで、クラッシュが起きた状況を把握しやすくなります。 Firebase Crashlytics や DeployGate など、端末からログを収集して Web コンソール上で閲覧できるようにして
Webブラウザが示す現在地の位置情報を変更したい 現在地の位置情報を必要とするネットサービスを利用していると、実際の現在地とWebブラウザ上での現在地がずれていることがよくあります。特にPCでは珍しくありません。さらには現在地の取得に失敗することすらあります。 PCの場合、この現象はいつまで経っても直らないことが多く、できることならWebブラウザの設定変更で解決したくなります。 その他にもWebブラウザの現在地を変えたくなることはあります。例えばGoogle検索は、現在地によって検索結果を最適化するので、SEO（検索エンジン最適化）では現在地を変えつつ検索結果を確認したくなることがあります。MEO（Map Engine Optimization：マップ検索エンジン最適化）も同様です。 しかし、Webブラウザを実行しているデバイス（端末）を物理的に移動させながら調査していたら、手間も旅費も掛
もっと良い選択肢がある Photo by Hugo Rocha on Unsplash はじめに あなたは、console.log()をコードのデバッグによく使うJavaScript開発者ですか？それには何の問題もありません。でも、知らないかもしれませんが、consoleオブジェクトには他にも驚くべきメソッドが沢山あります。この記事では、その効果的な使用方法について説明したいと思います。 consoleオブジェクトを使用する理由 JavaScript の consoleオブジェクトは、ブラウザのデバッグコンソールにアクセスし、コードで使用した変数の値を出力できます。多くの場合、正しい値がコードに渡されているかデバッグするために使用します。 ほとんどの開発者は、console.log()を使用してブラウザコンソールに値を出力したことがあると思います。logは、consoleオブジェクトの1メ
Debugging MySQL/MariaDB (4): Debugging with rr - nayuta-yanagisawa's blog
重い腰を上げて Debugging MySQL/MariaDB シリーズの第4弾を書いている。今回は rr debugger を使用したデバッグについて説明する。Intel または AMD の CPU を搭載した物理マシンに Linux (kernel 3.11+) をネイティブインストールした環境を前提とする。 rr debugger rr は Pernoscoによって開発されているデバッガーである。rr は gdb と同じ感覚で使えるが、次に挙げる gdb にはないすばらしい特徴を備えている。 プログラムの実行を記録し、バグを何度でも決定的に再現することができる。 ブレークポイントやウォッチポイントまで逆実行 (reverse execution) できる。 これらの特徴の何がすばらしいのか？想像してほしい。散発的なバグ（再現したりしなかったりするバグ）を GDB でデバッグするのは苦
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
シニアフロントエンド開発者みたいにChromeデベロッパーツールを使おう - Qiita
開発体験を変える! Chrome DevTools Tips 7選 - Qiita
console.log(); しか使えなかった自分へ。。。 - Qiita
mouseover 中に表示される DOM のデバッグ | blog.jxck.io
JavaScript で print デバッグ時に変数名を出力する - mizdra's blog
デベロッパーツールがさらに便利に！Flexboxの実装と検証が簡単になるFlexboxエディタとオーバーレイが搭載
VS Codeを使ってPythonコードをデバッグするための基礎知識
CSSを活用してHTMLのセマンティックエラーを指摘する方法 - ICS MEDIA
CSS GridをChrome デベロッパーツールで検証、デバッグする方法を解説
Android 11で追加されたワイヤレスデバッグが便利だった
2700人分のデバッグ作業を新卒１人で！CygamesのＡＩシステムがスゴい ニュースイッチ by 日刊工業新聞社
【Google Chrome】位置情報を変更してPCの現在地を自由自在に設定
JavaScriptでconsole.log()を使うのはやめよう - Qiita