1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 フロントエンドエンジニアの谷です。 本記事ではGoogle Chromeの開発者ツール、Chrome DevToolsを使いこなすために参考になるサイト、ページの紹介をします。 すでに多くのフロントエンドエンジニアが開発で使っているかもしれませんが、「要素のインスペクタなどの基本的な機能しか使っていない」「UA切り替えくらいしかつかってない」というような方や、そもそもほとんど使ったことがない、という方もこれらを参考にフロントエンド開発を効率化していきましょう！ 基本的な使い方 Chrome DevTools Overview 基本はやはり公式ドキュメ
@hokaccha に言われて便利すぎて脳みそ飛び出るかと思った途中から嘘です 以下、見たことのある内容が続きます 全然気がつかなかった・・・いつからだろう・・・ ＞ 17からだそうです Chromeにビルトインされてるのですぐ使えます。 ちなみに、キャプチャはChromeのdev版なのでstable版は少し違うかもしれません。stable(Macの17.0.963.46)でもOverride User Agentの項目あるのは確認してます。 通常はもちろんユーザーエージェントはChromeですが、Cmd+Option+I などでインスペクタを開くと 右下にギアアイコンがあって、そこからインスペクタのSettingが開けます すると Override User Agent という項目があるので チェックすると、よく使いそうな User Agent 一覧がプルダウンで開きます 試しに iPh
5月16日、Chrome ウェブストアの日本版がスタートしました。ウェブストアには、Googleが開発したWebブラウザ「Google Chrome」に“インストール”する形式のウェブアプリが大量にそろっています。新しいもの好きのはてなスタッフ3人は早速、仕事に使えそうなアプリから暇つぶし用のゲームアプリまで、いろいろなアプリを試してみたようです。3人でオススメアプリを持ち寄り、座談会を開催しました。 （※この記事は、グーグル提供によるPR記事です） Chrome ウェブストア - アプリケーション、拡張機能、テーマ Chrome ウェブストア日本版スタート！ はてブディレクターがGoogleに聞いてみた - はてなブックマークニュース ——司会の深山です。皆さん、本日はお時間ありがとうございます。まずは軽く自己紹介をお願いします。 id:chris0043（くりす）とid:chira_r
node.js で Web Socket の実験をしていて、いちいちテスト用の HTML を作るのが面倒なので作ってみました。 Chrome Extension は初めて書いたので、「こんなソースで大丈夫か？」なのですが、とりあえず自分の目的である Web Socket の開発テストには使えているので良しとしています。 Chrome Web Store - Simple WebSocket Client ソースはこちら hakobera/Simple-WebSocket-Client · GitHub なお、お気づきの方もいるかも知れませんが、名前もデザインも Simple-Rest-Client のパクリ にインスパイアされています。 おまけ node.js で以下のようなコードを書くと、Simple-WebSocket-Client を利用してチャットができます。 var sys =
メインブラウザをFirefoxからChrome に変更して暫く経ちます。Chromeも かなりエクステンションが豊富になって きました。いろいろとエクステンションを 試して、微妙に感じて消して、の繰り返 しですが、そんな中、マストに使ってい る拡張をご紹介します。 色々試して、最終的に残ったChromeエクステンションのまとめです。 CSS Tester どのページでもcssの追加テストが出来ます。すぐに反映されるので結構便利。 CSS Tester CSSViewer 先日記事にしましたが、インストールしてから毎日使っています。マウスを乗せるだけでその要素のcssを表示。便利ですねー。 CSSViewer View Selection Source ドラッグした部分のみのソースを表示します。Web制作時によく使っています。使い慣れるとほんと重宝します。 View Selection So
About Chrome Logger is a Google Chrome extension for debugging server side applications in the Chrome console. Most languages include their own logging capabilities, but sometimes it is easier to see your logs right in the browser. Chrome Logger used to be known as ChromePHP. If you are feeling generous, you can donate to help support development. Usage Using Chrome Logger is simple: Install the C
「2chRevival」は2ちゃんねるのdat落ちしたスレ（全部見られなくなったスレ）を復活させるChrome拡張機能です。 他にもdat落ち復活拡張機能はあるのですが、「2chRevival」はワンクリックで復活させられるので便利です。 原理としては、2ch DAT落ちスレ ミラー変換機 ver.４を利用しています。 自動的に復活させることもできますし、ミラーサイトを自分で選択することも可能。 以下に使ってみた様子を載せておきます。 まず「2chRevival」をインストールしましょう。 そして、dat落ちしたスレを開いてみます。 dat落ちしているので、通常は、最初のレスしか見られません。 「2chRevival」をいれていると、上部に「DATファイルを復活させる」というリンクがあります。 「DATファイルを復活させる」をクリックするだけでOK。 このとおり、最後のレスまで全部見られま
2010/05/12 「グーグルのエンジニアがSafariのためにコードを書くこともあるんですよ。WebKitコミュニティの中では、そのほうが物事の進みが速いという不文律のようなものがあるんです」 こう語るのは、グーグルでChrome開発に携わるソフトウェア・エンジニアの鵜飼文敏氏だ。鵜飼氏はChromeに機能を追加するために、WebKitコミュニティでWebSocketの設計、実装なども行なっている。 WebKitは不思議なプロジェクトだ。よく知られているように、Google ChromeとApple Safari（およびiPhoneやiPadに搭載されるそのモバイル版のMobile Safari）は、オープンソースベースで開発が進む「WebKit」というコードベースを共有している。ここにさらに、WebKitを統合したGUI開発フレームワーク「Qt」を抱えるノキアや、搭載ブラウザをWeb
この2年でノートPC2台購入。自他のPCはクラッシュしてリカバリー。会社のPCは新しいのがあたり、再セットアップ。 そんなこんなで、会社はまぁともかくとして、とりあえず全PCが比較的3ヶ月に一度リカバリーしてもいいように、自分用にメモとして残しておきます。 色々試した結果残ったExtension そもそも。 「これだけは入れておきたいGoogleChromeExtension50」とか、「はずせないお勧めExtension75」とか、お前らは本当にそれだけ全部入れてやっているのかと問いただしたい。 とりあえず60近く入れると、ボタンが隠れて恐ろしく使いにくくなる上、起動してもすぐクラッシュするようになった。なにより、いちいち起動のたびにわけのわからないローディングが走ったり、カクカクする。 皆さんもひとまず入れすぎには注意しよう。 あと、例えば愛用しているdeliciousのExtensi
With hundreds of thousands of themes, skins & free backgrounds, you can customize any website with your own color scheme in a click. We heard you - Unlimited Styles are BACK! Enjoy over 500K custom website themes in just a click. Custom website themes that make the internet entirely yours ★ Explore the largest gallery of free website themes for websites like: Roblox, Youtube, Facebook, Google and
組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! とにかく便利な SEO解析全部入りChrome拡張機能 「SEO Site Tools」は、SEO解析に必要な多くのデータを、一括でわかりやすく表示してくれるChrome拡張機能。 SEO評価の指標として疑問視されつつあるページランクではなく、SEOmoz のドメイン ランクをボタンに表示するのも特徴のひとつです。 「SEO Site Tools」で解析できるもの 全部書き出しているとキリがないので、画像で一気にご紹介します。 ボタンにSEOmoz のドメイン ランクを表示 ↑どうしてもGoogleのページランクで判断してしまいがちですが、デフォルトでこのような数値を表示してくれるのはありがたいですね。 基本のサイト・ページデータの表示 ↑Alexa
Google Chromeの拡張機能を探している。 そんなあなたにおすすめなのが、『17 Google Chrome Extensions for Web Designers and Developers』。デザイナー・デベロッパーのためのGoogle Chromeエクステンション集です。 便利そうなのが揃っているので、いくつかご紹介しますね。 Eye Dropper サイトから色を抽出できるカラーピッカー Aviary Screen Capture スクリーンショットを撮れるアドオン Chrome Sniffer 見ているページで使われているフレームワークやCMSを表示してくれる The Lorem Ipsum Generator Lorem Ipsumのダミー文字を生成してくれるアドオン Chrome SEO インデックス数、バックリンク数などを表示してくれるSEOツール IE Tab
文末部修正追記致しました。大事な点ですので既読の方も是非目をお通し下さい。 開発阪がVersion5となり、あれやこれやNigtlyからの機能追加が進んでいる訳ですが今回は表記Google Chrome Content Settingsを紹介します。元々Google ChromeでもJavaScriptの有効/無効、Cookie管理などは機能として備えていました。 しかし、Firefoxと比較した際先行されていた分物足りないところがありました。FirefoxのJavaScript管理にはNoScript拡張(NoScript :: Add-ons for Firefox)という強力な拡張があり、表示するサイト毎のJavaScriptの有効/無効を要位に切り替え管理出来ます。 それに比べると対象を定めず全有効/全無効しか無いChromeの設定は使いにくかったのです。 今回はそれを含めてコンテ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
