作業効率が3倍になる！絶対に入れておくべき、Chrome拡張機能おすすめ10選 | iPhoneの神様 - iPhone X・iPhone8最新情報
Chrome開発者ツールの小技集 | POSTD
最近、普段以上にChromeの開発者ツールを使うことに時間をかける機会がありました。その過程で、自分が今まで気づいていなかった機能をいくつか見つけました（少なくとも今までその機能を探す必要に迫られていなかった、とも言えるのですが。例えばブラックボックス化や非同期のスタックトレースなど）。そのため、開発者ツールでとても気に入っているいくつかの機能についてまとめてみたくなったのです。 小さな虫眼鏡ののアイコンは、特定の要素やCSSプロパティに対して、「どのCSSファイルに書かれているどのセレクタ/クラスが最終的なスタイルを決めているか」を示してくれます。例えば、どれかDOM要素に対して「要素を検証」を選び、右側の「Computed」というタブを選びます。確認したいCSSプロパティを見つけてその虫眼鏡アイコンをクリックすることで、すぐさま右側に正しいCSSファイル内のクラス/セレクタを表示してく
GitHub のリポジトリページにアクセスするだけで自動的に git clone される Chrome 拡張書いた - その手の平は尻もつかめるさ
GitHub のリポジトリページにアクセスするだけでローカルに git clone される Chrome 拡張を書きました．ggc という略称になりますが，まあなんかこれ紛らわしいですね． なぜこんなものが必要になったかというと GitHub のリポジトリ内検索は割と結果がひどくて，手元に clone してきてから grep なりなんなりをかけた方が必要なものを得られる可能性が極めて高い，というのがあるためです． そんでもっていちいち clone するっつうのもダルいので，それだったらブラウザでリポジトリのページにアクセスした瞬間に自動的に clone すればいいじゃーん，もう2015年なのでストレージとか気にせず豪快にいこうやガッハッハ，という方法に id:s5r 氏と話していて辿り着いたのでそれを実装したというのが経緯になります． Chrome 拡張を名乗っていますが，実態は Chro
任意のサイトで任意のJavaScriptを自動実行させるChrome拡張 - Qiita
任意のサイトで任意のJavaScriptを自動実行させる拡張機能の紹介です。 nakajmg/ScriptAutoRunner 使い道 スニペットを実行させておきたいときに jQueryなどのライブラリを挿入しておきたいときに デバッグに devtools-snippets/にあるconsoleを拡張するスニペットなど、スニペットをあらかじめ実行しておく必要があるものなどに使えます。 ブックマークレットなどで挿入していたjQueryなども自動で挿入することができます。 ホスト名でフィルタリングできるので、デバッグにも使えると思います。 使い方 まず実行させたいスクリプトを追加します。スクリプトの追加は拡張のオプションページから行います。 オプションページは次の3つの方法で開くことができます。 拡張機能のアイコンを押して歯車アイコンをクリック 拡張機能のアイコンを右クリックして"オプション"
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
Ptengineウェブ運営All-in-Oneプラットフォーム | ウェブの改善や改善業務はこれひとつで完結
サイト強化はこれひとつ はやく、大きな成果へ ヒートマップ、サイト解析、ページ編集、A/Bテスト、WEB接客、パーソナライゼーション 1つのタグ設置だけで、全てノーコードで使えます。
ブラウザ拡張を用いた業務改善手法 - クックパッド開発者ブログ
買物情報事業部の根岸(@negipo)です。今回はブラウザ拡張を日常業務でどう使っているかについて紹介します。 ブラウザ拡張とは ブラウザ拡張は、ブラウザによるウェブとのインターフェースをJavaScriptやCSSを用いて自分好みにカスタマイズする機能です。Google Chromeを利用していればChromeウェブストアなどで公開されている拡張をインストールできるでしょう。一方で、開発したブラウザ拡張を自分で使うために、Chromeウェブストアによる公開と言うプロセスを踏むのは面倒です。日常的にウェブのインターフェースを改変する道具としてブラウザ拡張を使うためにはいくつかの手法がありますが、僕はGithubのdefunktさんが作ったdotjsを使っています。詳細は省きますが、今開いているページでalertを出すぐらいの機能であれば10秒で開発作業を終えることができると思います。 また
React Nativeのデバッグ方法 - Qiita
ドキュメントを探しても見つからず、ググったらStack OverFlowにありました。 http://stackoverflow.com/questions/29289304/how-do-you-debug-react-native Cmd+D from within the Simulator. It'll popup Chrome and from there you can use the Developer Tools. こんなのどこに書いてあるんでしょうね。 ということでシミュレーター上でCmd+Dを叩いてみます。 すると、chromeでこんな画面が立ち上がります。 メッセージの通りChromeのDeveloper Toolsを起動します。 index.ios.jsというファイルを開くとソースの中身が見れます。 任意の場所にブレークポイントを置いてアプリをCmd+Rでリロードし
Webフロントエンド表示速度、最速化手法まとめ - Qiita
やりすぎても無駄になることがあるので、必要十分なバランスを見極めて実施する。主に社内のプログラマ向けのまとめ資料。他にもあれば追記していく予定。 ページの状態を調べる まず対象のページが、どういった状態なのかを調べる。 Google PageSpeed Insights これを100点満点にする必要はないが、赤くなっている項目に関しては、なるべく対応したほうが良い。モバイルサイトにも対応しているので便利。 https://developers.google.com/speed/pagespeed/insights/?hl=ja pingdom 実際にページにアクセスしてスピードを計測できる。海外サーバなので、けっこう遅い…。最適化前と最適化後で比較するのに使うといい。 http://tools.pingdom.com/fpt/ Chromeデベロッパーツール コンテンツの読み込み順序／速度
デザインチェックに！ ワンクリックでUser Agentを切り替えられるchrome拡張機能 | ライフハッカー・ジャパン
「ExtensionUser-Agent Switcher for Chrome」はワンクリックでUser Agentを切り替えられる拡張機能です。Safari、IE、Firefox、Operaなど主要なブラウザに加え、iPhone、iPadのUser Agentに切り替えることができます。スマホ用のデザインチェックなどで使えそうですね。 以下に使ってみた様子を載せておきます。まずExtensionUser-Agent Switcher for Chromeへアクセスしましょう。Google Chromeにインストールしましょう。 このようにアイコンをクリックして、切り替えたいUser Agentを選択すればOK。アイコンバッヂに現在適用されているUser Agentが表示されるのでわかりやすいです。Google Chromeのデベロッパーツールでも変更できますが、拡張機能を入れている方が
現代的で大容量なクライアントサイドストレージの実装 WMCache.js を公開しました - latest log
ブラウザ上で、100MB 〜 2GB もの大容量のクライアントキャッシュを高速に、ストレスなく扱えます。 もちろんモバイルブラウザに対応しており、iOS 8 と Chrome for Android でも動作します。 詳しくは、 https://github.com/uupaa/WMCache.js/wiki/WMCache に書いたのでご覧ください (ε・◇・)з o O ( いつまでも 5MB + 5MB な (ε・◇・)з o O ( チョビットな世界に縛られているボクタチではないのです! (ε・◇・)っ 画像とWebAudioな動作確認ページ ひとりごと WebKit の IndexedDB は Blob をサポートしていない。Blob が使えれば、もっとシンプルに組めた。 Chrome の FileSystem は Blob も ArrayBuffer も受け付けるが現状 Blo
Unity 公式ドキュメントの英語版と日本語版を切り替えるChrome拡張を作りました - 強火で進め
(2013/02/13 追記) 公式ページに原文へのリンクが追加されました。 (追記ここまで) Unityの公式ドキュメントのうち「ユーザーマニュアル」と「リファレンスマニュアル」の日本語訳版が現在公開されています。 Unity - Unity Manual http://docs-jp.unity3d.com/ この日本語訳のURLは英語版のドメインで有る docs.unity3d.com が docs-jp.unity3d.com に置き換わっているだけで以降の部分は英語版と同一のURLに成るように作られています。 例えば以下のドキュメントの日本語版はドメインに -jp を追加したURLに有ります。 http://docs.unity3d.com/Documentation/Components/comp-AIGroup.html ↓ http://docs-jp.unity3d.co
モバイルWeb開発に役立つ！Chrome DevToolsの新機能「デバイスモード」
モバイルWeb開発に役立つ！Chrome DevToolsの新機能「デバイスモード」 Tomomi Imura（Slack） 今回のGoogle I/OはAndroidに特化していた傾向が強く、WebテクノロジーやChromeの扱いが比較的小さかったせいもあり、多くのWebフロントエンドディベロッパーは不満を感じた部分もありました。 そこでその中の数少ないChromeのセッションの中から、私が興味深く感じたクロスデバイス開発にはこの先欠かせなくなると思われる Chrome DevToolsの新機能についてレポートします。 このセッションを行ったPaul Bakaus氏（以下、ポール氏）は、かつてjQuery UIやAvesゲームエンジンを開発したことでも知られています。一時期日本に在住していたこともあるので、この記事を読んでいる皆さんには既になじみのある方かもしれません。現在はGoogle
自堕落な技術者の日記 : ロシアの方が開発したJavaScript PKIライブラリPKI.jsをさわってみたぞ - livedoor Blog（ブログ）
基本は喰ってるか飲んでるかですが、よく趣味でカラオケ・PKI・署名・認証・プログラミング・情報セキュリティをやっています。旅好き。テレビ好きで芸能通 私はJavaScript実装の暗号ライブラリ jsrsasign(注：RSAだけじゃないよ!) を開発などして遊んでいるわけですが、 そんな矢先、先週ぐらいですかねぇ、PKI.js(http://pkijs.org/) というJavaScript暗号ライブラリが公開されました。 ぶったまげたのはpure JavaScriptなのにOCSPやCMS SignedDataやTimeStampなんか に対応しているのだそうです。さらに凄いのはNIST PKITSのテストも通すせるような認証パス検証(証明書のチェーンの検証)機能も実装されているのだそうです。 先を越されて悔し〜〜〜って感じ。 ようやく時間ができたので、ちょっと動かしたりしてみたのでブ
覚えておきたいDevToolsのコマンドラインAPIまとめ - Qiita
DevTools、使ってますか？ もはやChromeじゃないと開発できないくらいに飼い慣らされています。 ブレークポイントやconsole.logなど基本的な使い方から、TimelineとAuditsを使ってのパフォーマンス計測などなど、DevToolsのポテンシャルは計り知れません。 個人的にはConsole APIが好きなんですが、今回はConsoleパネルで使える Command Line API の使い方についてまとめてみました。 $_ $_には最後に評価した式の結果が保存されています。 Console上で計算を行なった場合や、$セレクタなどでDOMを検索した結果など、最後の結果が常に保存されます。 $0 〜 $4 $0から$4にはElementsパネルで選択した要素が5つ保存されています。$0が最後に選択した要素で数字が増えるごとに過去に選択した要素になります。 $0は特に使いや
1分で実現できるjavascriptにおけるconsoleまわりの有用なテクニック4つ - Qiita
jsのconsoleまわりのテクニックはいろいろありますが、個人的に有用だと思ったものにしぼって紹介します。 chromeなら、command + option + jでconsoleを開いて下記のコードを貼りつければ実際に動きを確認できます(1分でできます!!)。 console.logの出力結果をcssで装飾する 出力例 サンプルコード console.log("%csuccess", "background-color:#5bb75b;color:white"); console.log("%cfail", "background-color:#da4f49;color:white;font-size:30px");
未使用CSSセレクタを見つけて削除する方法 - Qiita
サイトが大きくなればなるほど未使用セレクタとか増えちゃってCSSで余計な容量食っちゃったりしませんか？ そんな時に、ページごとに使っていないセレクタを見つけて削除したい。 いろいろ未使用セレクタを見つけるツールがあるみたいですが今回はChromeの開発ツールを使いました。 未使用CSSセレクタの見つけ方 Choromeの開発ツールのAuditsをクリックし、 Runボタンをクリック。 Remove unused CSS rulesを開くと そのページで使われていないCSSセレクタが一覧で表示されます。 未使用CSSセレクタの削除 あとは以下の手順で削除する。 他のページのviewやjavascriptでそのセレクタが使われていないか調査 使われていない場合は削除する 自分の環境だとRails使っているので grepかけて他で使ってないかチェックしてから削除します。 grep -r 'fb_
Chrome DevToolsを使いこなすための参考サイトまとめ | 1 pixel｜サイバーエージェント公式クリエイターズブログ
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 フロントエンドエンジニアの谷です。 本記事ではGoogle Chromeの開発者ツール、Chrome DevToolsを使いこなすために参考になるサイト、ページの紹介をします。 すでに多くのフロントエンドエンジニアが開発で使っているかもしれませんが、「要素のインスペクタなどの基本的な機能しか使っていない」「UA切り替えくらいしかつかってない」というような方や、そもそもほとんど使ったことがない、という方もこれらを参考にフロントエンド開発を効率化していきましょう！ 基本的な使い方 Chrome DevTools Overview 基本はやはり公式ドキュメ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
REST clientのPostmanが便利だった - 偏った言語信者の垂れ流し
ソニック速報
