ヘッドレス Chrome スタートガイド | Blog | Chrome for Developers
要約 ヘッドレス Chrome は Chrome 59 でリリースされます。Chrome ブラウザをヘッドレス環境で実行する方法です。基本的には Chrome を使わずに Chrome を実行しますこれにより、Chromium と Blink レンダリング エンジンが提供する最新のウェブ プラットフォーム機能がすべてコマンドラインに組み込まれます。 なぜこれが有用なのでしょうか ヘッドレス ブラウザは、UI シェルを表示する必要のない自動テストやサーバー環境に最適なツールです。たとえば、実際のウェブページに対してテストを実行したり、そのウェブページを PDF 化したりできます。また、ブラウザが URL をどのようにレンダリングするかを検査することもできます。 Headless（CLI）の起動 ヘッドレス モードを開始する最も簡単な方法は、コマンドラインから Chrome バイナリを開くこと
Optimise your web development workflow 2016
Chrome DevTools Optimise your Web Development Workflow Originally given at ffconf 2016, watch the talk here Umar Hansa / @umaar You might also like these slides on browser automation in JavaScript About Me Current A few things I like... People leave on time Hack days are not just fixing technical debt Open Source github.com/springernature github.com/springernature/frontend DevTools Tips A develope
ブレークポイントを使ったJavaScriptデバッグを整理してみた【再入門】 - Qiita
はじめに プログラミングの上達において、デバッグスキルを上げることはとても重要で近道の1つだと考えています。 私自身、勉強し始めた頃に知っていれば（理解できていれば）とよく思います。 今回、JavaScriptデバッグについてChromeDevtoolsとブレークポイントを使った基本パターンを整理しました。 自身の復習かつ、あまり馴染みの無い方でも、以下おおよそ理解できるようになれば良いなぁ、というのが本稿の目的です。 どのようなものにブレークポイントが貼れるのか どういった時にブレークポイントが発動されるのか ブレークポイントが発動されると何ができるのか ご存知の方には特に目新しいことはないかと思いますが、何かのお役に立てば幸いです。 表示・動作はChrome 50.0.2661.87mで確認したものになります(2016-05-11) タブやパネルの位置は環境によって異なる可能性がありま
Cacoo - Web上で図の作成とリアルタイムコラボレーション
Online diagramming tool for collaborating on wireframes, flowcharts, and more
Chrome Developer Toolsでパフォーマンス計測・改善 - Qiita
Chrome Developer Toolsを使ったWebページのパフォーマンス計測・改善についての説明です Networkパネル、Timelineパネル、Profilesパネルの使い方を説明してから パフォーマンスの計測・改善について説明していきます Networkパネル Networkパネルはページのリクエストをしてからの通信内容の一覧を表示します 記録方法 左上のRecordボタンを押すと記録が始まる もう一度押すと記録が停止する 必要に応じて、Disable cacheやCapture screenshotsを設定する 表示項目の変更 赤枠で囲んだ部分を右クリックすると こんな感じでメニューが出てくるので表示したい項目をクリックする 項目の一例 Name：リソースの名前 Method：HTTPメソッドの種類 Status：レスポンスのステータスコードとテキスト Type：リソースの
デバッグの技術 | POSTD
この記事は、アムステルダムで2015年に開かれたFronteersのカンファレンスで私が行った講演、「デバッグの技術」に対応するものです。 要約：利用可能なあらゆるツールの使い方を学び、必要なときにそれを使うことで、バグの撃退を楽しみましょう。そのほうが、キーボードを無暗に叩いて6か月も費やしてしまうより、ずっと楽しいものです。 本題に入る前に… この記事を終わりまでスキップしたければ…… Don’t. Write. Bugs. とはいえ…… おそらくこれを読んでいるあなたはロボットではないでしょうから、1個や2個のバグぐらいは書いてしまったことがあるでしょう。「銀の弾丸」は存在しないのです。 実際、先ほどジョークで申し上げた『バグを書くな』というのは、デバッグの仕方を学ぶことの対極にあるものです。必要なのは経験です。バグに対するアプローチを見つけられるようになるためにはバグに遭遇しなけれ
Chrome DevTools でコストの高い描画処理を探す流れ - kitak blog
先日、Chrome DevTools の「Enable paint flashing」を使う - kitak.blog で、Chrome DevTools の「Enable paint flashing」を使って不要な描画処理を検知する方法を紹介しました。 不要な描画処理は行わないほうがいいに決まっていますが、必要と思われる描画処理でも、描画のコストが高くアプリケーションのパフォーマンスを低下させるものがあります( ここでのコストは描画にかかる時間とします )。 コストの高い描画処理として、例えば、以下の様に「ドットのボーダーに囲まれたり」、「角丸だったり」、「影のついているもの」が、知られています(かなり極端な例ですけどね)。 この記事では、DevToolsのTimelineを使ってコストの高い描画処理を探す流れについて紹介します。 Timelineの細かい機能の説明は、最新号のWEB+
Six Tips for Chrome DevTools | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. The following is a guest post by Umar Hansa. Umar has a newsletter I’m a fan of and graciously offered to write this guest post in that style. I’ll let him introduce himself. Hey, I’m Umar. I like to share web development related tips on Twitter (@umaar) and also through Dev
未使用CSSセレクタを見つけて削除する方法 - Qiita
サイトが大きくなればなるほど未使用セレクタとか増えちゃってCSSで余計な容量食っちゃったりしませんか？ そんな時に、ページごとに使っていないセレクタを見つけて削除したい。 いろいろ未使用セレクタを見つけるツールがあるみたいですが今回はChromeの開発ツールを使いました。 未使用CSSセレクタの見つけ方 Choromeの開発ツールのAuditsをクリックし、 Runボタンをクリック。 Remove unused CSS rulesを開くと そのページで使われていないCSSセレクタが一覧で表示されます。 未使用CSSセレクタの削除 あとは以下の手順で削除する。 他のページのviewやjavascriptでそのセレクタが使われていないか調査 使われていない場合は削除する 自分の環境だとRails使っているので grepかけて他で使ってないかチェックしてから削除します。 grep -r 'fb_
Chrome DevToolsを使ってJavaScriptのメモリリークを検出し、解消する - 人生dat落ち
JavaScriptを書いていたらブラウザがくっそ重くなる症状に出くわした。あぁ、噂のメモリリークですわ。 先人の知恵に頼るマン。それっぽい記事が見つかる。 javascriptのメモリリーク対策(随時更新) - Qiita Shibu’s Diary: JavaScriptのメモリリークを10倍速で発見する Taming The Unicorn: Easing JavaScript Memory Profiling In Chrome DevTools Writing Fast, Memory-Efficient JavaScript - Smashing Magazine angularjs - How to catch memory leaks in an Angular application? - Stack Overflow 上の記事はProfiles + Take Heap
ブラウザ拡張を用いた業務改善手法 - クックパッド開発者ブログ
買物情報事業部の根岸(@negipo)です。今回はブラウザ拡張を日常業務でどう使っているかについて紹介します。 ブラウザ拡張とは ブラウザ拡張は、ブラウザによるウェブとのインターフェースをJavaScriptやCSSを用いて自分好みにカスタマイズする機能です。Google Chromeを利用していればChromeウェブストアなどで公開されている拡張をインストールできるでしょう。一方で、開発したブラウザ拡張を自分で使うために、Chromeウェブストアによる公開と言うプロセスを踏むのは面倒です。日常的にウェブのインターフェースを改変する道具としてブラウザ拡張を使うためにはいくつかの手法がありますが、僕はGithubのdefunktさんが作ったdotjsを使っています。詳細は省きますが、今開いているページでalertを出すぐらいの機能であれば10秒で開発作業を終えることができると思います。 また
Chrome Devtoolsで描画パフォーマンスチェック - Qiita
今までなかなか使いこなせてなかったChromeのTimeline周りを使って描画パフォーマンスチェックをする機会があったので、ちょっとメモ。 そもそも描画パフォーマンスチェックとは Webサイトやゲームを開いていて「なんか重いなー」と感じることが多々あると思いますが、その原因のひとつとして画面描画が重いことが挙げられます。スペックが低い端末で描画が重いサイトを見ると画面がカクカクしたり、ブラウザがクラッシュしたりします。 それを防ぐため、描画のパフォーマンスを監視して重い処理を改善していくことが必要になってくるわけです。 Chrome DevtoolsのTimelineタブを使おう Chrome DevtoolsをhtmlやCSSのチェックにしか使っていないという方は地味に多いと思いますが、Timlineというタブを使ってサイトの描画パフォーマンスを調べることができます。ちなみにスクリーン
Chromeの拡張機能とかのまとめとか (1)タブ周りの挙動 - おれ かきすてる おまえ よむ
ここ数日、Google Chromeの拡張機能を整理している。 どれだけ整理してもなんだかんだで30以上の拡張機能が常時動いている状態でアレなのだが、とりあえずカテゴリ別に、どのような考えでどのような拡張を選ぶに至ったのかまとめておこうと思う。誰かの役に立つかも知れないし。 リンクとタブの挙動を最適化する 新しいタブブラウザを使い始める時のファースト・イラッとポイントはタブの挙動だと思う。最低限タブの挙動が自分好みにならないと絶対に使いたくない。しかしGoogle Chromeはこの辺りの挙動を変更するオプションを持たないため、拡張機能を用いてアレする必要がある。 Google Chromeのデフォルト挙動は、以下のようになっている。 左クリックで「同じタブで開く」 ホイールクリックで「新規バックグラウンドタブで開く」 新規タブはアクティブタブの右側に開き、連続して開くとさらに右方向へ伸び
Google Chromeでの検索結果を新しいタブで開く方法
設定手順 Google Chromeのアドレスバーを右クリックして、「検索エンジンの編集」を選択する。 すると次のような検索エンジンの設定画面が現れるので、赤枠部分に設定を入力していきます。 左から、以下のような設定項目になっています。 検索エンジン名（何でもいい） キーワード（何でもいい） 検索クエリ用のURLとか文字列 3以外は、適当に入力してもいいみたいです。ただ2のキーワードは、同じものがあると登録できないようなので、他とかぶらないように入力します。 僕は以下のように入力しました。 Google new tab google検索結果を新しいタブで開く javascript:window.open(‘http://www.google.co.jp/search?q=’+encodeURI(‘%s’)); 3は、JavaScriptで検索結果を新しいタブで開くようにしています。 最後に
Chrome Developer Toolsを使いこなそう！
4/2のGoogle Developers Live Japan #3の資料です。Read less
CSS Shapes Editor for Chrome
CSS Shapes Editor for Chrome 31 Aug 2014 - London CSS Shapes allow web designers to wrap content around custom paths, but authoring them is not trivial. None of the traditional tools used in web design currently export code for CSS Shapes and the syntax conversion workflow is unwieldy and time-consuming. It wouldn't help too much even if they did. CSS Shapes are meant to be used in the browser con
DevTools 上で jQuery などのお気に入りのライブラリを簡単に使いたい方へ - latest log
Chrome の DevTools には Code Snippets という機能があります。 これは「DevTools 上でお気に入りのライブラリを登録しておいて簡単に呼び出して使いたい」と言った、ありがちなニーズにぴったりフィットする機能です。 ChromeのDevToolsでjQueryをいつでも使いたいなら、Source-Snippetsで右クリックして[New]選んでjQueryをペタリしておくと[Run]するだけでjQueryをDevToolsで利用可能になりますよ〜 http://t.co/SfLE4Sic39— コラーゲンたっぷりさん (@uupaa) 2014, 5月 15 http://t.co/Ee2keo5n7u これ色んな事につかえて、DevTools の IDE としての機能も、アイデアしだいで拡張できるので、もちょっと広く認知されるといいんだけども〜 (ミ・◇・
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SnappySnippet - Cửa hàng Chrome trực tuyến
Introduction | Down and Dirty with Chrome Developer Tools
Chromeで新しいタブを開く時に、おもしろGifアニメーションをランダムで表示する機能拡張 -animatedTabs