技術書典5 で本記事をさらにパワーアップさせた本を書いたのでよかったらどうぞ Chromeデベロッパーツールを使いこなそう Console編 Chrome デベロッパーツールの Console には Web 画面を解析するための便利な機能が備わっています。 この便利機能を覚えておくと Web 画面からの情報抽出 や、 Chrome Extension 開発 がとても捗ります。 ※ 筆者はこの機能を利用して、 ウェブスクレイピング時のDOMセレクタを調べたり、 Q Accelerator などの Chrome 拡張機能を開発しています。 本記事では、次の３つを解説します。 1. Console の便利機能 2. 実際に Qiita の画面を解析する手順 3. リアルタイムで評価結果を返す Eager Evaluation （Google IO 2018 で発表されました） 便利機能（コマンド

つい最近、初めて作った Google Chrome エクステンション「Feedly をはてブ対応させる Chrome エクステンション」をブログで紹介したので、その時の技術的なメモなどを Qiita に残しておきたいと思います。まあ検索すればすぐに集まる程度の情報ではあるものの、一箇所にまとまってなかったので、自分用の備忘録でもあります。 全てのソースコードは github 上で公開しているので、気になる方は参考にしてみて下さい。実際に書いたスクリプトの簡単な解説もこの記事の最後に付録として付けています、 超最低限な Chrome エクステンションの作成 Chrome エクステンションは基本的に、一つのフォルダに保存された複数のファイルからなります。エクステンションのルートに必要な最初のファイルは、manifest.json というファイルで、これがエクステンションの基本的な情報を含んでい

TL;DR Chromeで console.profile() と console.profileEnd() を使うと超簡単にJSの実行パフォーマンスを解析できる、という事実を今日知ったのでシェアさせていただきます。 やりたいこと JSの任意の関数の実行プロファイル (コールスタックごとの所要時間) を見たい。 やりかた Google Chromeのデバッグコンソールで以下のようなスクリプトを入力して実行 (見やすくするため改行入れてますが実際には一行で)

Many e-commerce companies are mostly on the lookout for their data reporting since the majority of websites are crowded with lots of activity. Currently, many referrals are posted on websites, which should be identified and eliminated. It is therefore important to be able to identify these referrals by following the list of recommendations offered by Julia Vashneva, the Senior Customer Success Man

はじめに 昨今のWebブラウザはどのような機能があるのか把握するのも大変なほど多機能で便利ですよね。 Webブラウザの機能を把握してうまく使いこなせること（とくに開発者ツール）が、フロントエンドエンジニアの前提スキルになってきてるのかなぁと感じる今日この頃です。 ということで自分のデフォルトの開発用ブラウザはChromeなのですが、これを覚えて捗ったなぁということをメモしていこうと思います。 思い浮かんだら追記していこうと思っているのでストックして頂けると幸いです。 基本系 キーボードショートカットを覚える Chromeのキーボードショートカットの一覧 キーボードで出来ることはなるべくキーボードでやるけれども、マウスやトラックパッドでやったほうが速い場合は臨機応変に切替えることを心がけています。 Chrome Canaryを使う Chromeの開発者向けプレビュー版 Chrome Cana

DevTools、使ってますか？ もはやChromeじゃないと開発できないくらいに飼い慣らされています。 ブレークポイントやconsole.logなど基本的な使い方から、TimelineとAuditsを使ってのパフォーマンス計測などなど、DevToolsのポテンシャルは計り知れません。 個人的にはConsole APIが好きなんですが、今回はConsoleパネルで使える Command Line API の使い方についてまとめてみました。 $_ $_には最後に評価した式の結果が保存されています。 Console上で計算を行なった場合や、$セレクタなどでDOMを検索した結果など、最後の結果が常に保存されます。 $0 〜 $4 $0から$4にはElementsパネルで選択した要素が5つ保存されています。$0が最後に選択した要素で数字が増えるごとに過去に選択した要素になります。 $0は特に使いや

と思ったからググったらあった。 SouffleCode.net: The Leading Souffle Code Site on the Net ！！！Chrome v33からCustom.cssを変更しても効かないようになったので注意！！！！（エントリーの最後に代替策について記述しています） Chrome Developer Toolsを開いて、別窓にしてもう1回ショートカットキーを押すとDeveloper ToolsのウィンドウをDeveloper Toolsで解析できる。便利。 でも、なんかウィンドウいっぱい開かないといけないから面倒だって人は、Chromeでchrome-devtools://devtools/bundled/devtools.htmlを開けば直接HTMLファイルを開けるので、この状態で普段HTMLを見る時みたいに見れる。便利。 これを開いてると、Custom.c

Googleの登場以前とそれ以降とでは、Webサイトのアクセス方法は大きく変わった。かつてのようにブラウザに大量のブックマークを保存しておくのではなく、その都度Googleで検索して目的のサイトにアクセスしている人も多いはずだ。 ここでは、そんなGoogleの検索をより快適に行える、Chrome用の拡張機能を20個まとめて紹介しよう。カユいところに手が届くこれらの拡張機能を追加することで、Googleによる検索がさらに快適になること請け合いだ。 なお一度に大量の拡張機能をインストールすると、不要な機能が追加された際に原因の見極めが難しくなるほか、機能が競合してうまく動作しない可能性もある。自分にとって必要性の高い拡張機能から順番にインストールし、動作を確認してから次へと進むことをおすすめする。 Add links to change languages on Google 「Add lin

November 13, 2013Yesterday, I learned about a nifty little JavaScript debugging feature which is part of Chrome's developer tools. During Web Developer Conference Compact, Marcus Ross (@zahlenhelfer) gave a talk about the various JavaScript debugging tools implemented in Chrome, one of which is the console.table() function I want to show here. #Logging Array Data with console.log() Imagine you hav

Webフロントエンドのパフォーマンスチューニングについて全体的な話。javascript、Chrome DevToolsの紹介、ボトルネック、ポイントなど。

Organize Your Code Gists are like long-term memory for the professional software developer. Use GistBox's color-coded labels to curate your personal gist library. Collaborate With Team Share your knowledge with the rest of the team. GistBox Groups are the perfect way to build a social library of useful code snippets.

stackoverflowにChromeのCanvas Inspectorを有効にする方法がのってた。 http://stackoverflow.com/questions/9143209/html5-canvas-inspector/14466889#14466889 ChromeにCanvas Inspectorがあったなんて… 名称は”Canvas inspection”でしたけど。 開発中の機能なので何があっても知らないよっていう扱いらしいです。 locationに chrome://flags/ と入力。 英語表記の”Enable Developer Tools experiments”は下の方「デベロッパー ツールのテストを有効にする」を有効へ。 Chrome 再起動。 デベロッパーツールを開く( command + option + i ) 右下の「歯車アイコンをクリック」

以前から取り沙汰されていた問題でしたが試験運用版としてようやく実装されました。 非表示の設定が出来ず、いちいち閉じるかダウンロードウィンドウを 開かなければならないとなると余計に鬱陶しく感じるものです。 非表示にする方法 アドレスバーで｢chrome://flags/｣を実行する ｢新しいダウンロードUI｣を有効にする ブラウザを再起動 これで完了です。 Macでは"新しいUI"というのが表示されないようです。(Windows未確認) 兎にも角にもダウンロードバーは表示されなくなったので気分もすっきり。