Engadget | Technology News & ReviewsPick up the 9th-gen iPad with two years of AppleCare+ for only $298
CoffeeConsole - Chrome Web Store
A CoffeeScript console within the Web Inspector.
Chrome の console.log にスタイルを適用する方法 | WebDelog
詳細はここに載ってます。 Console API Reference console.log("%cMy name is...", "font-size: 2em"); こんな感じで %c を置くことで、次のパラメータに書いたスタイルが適用されるみたいです。 console.log("%cMy name is...%cturusuke", "font-size: 2em", "color: orange; font-weight: bold; font-size: 4em"); こういう風に書くことで別々なスタイルを当てることもできるみたい。 Chrome Logger へ応用 Chrome Logger を使うとサーバーサイドのプログラムから console へ値を渡して出力させることができます。 Chrome logger 今回はこれを使って、先ほどのようにスタイルをつけて出力させるよ
Learn web development | web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
Hacking Chrome DevTools
— The post is updated as of Chrome 55 — There’s a lightweight way to hack on Chrome DevTools without checking out the whole gigantic chromium repository and spending hours compiling it. This might be useful if you’d like to hack on DevTools front-end without touching its backend (the complete DevTools contribution guide could be found here). Getting sources: simpleThe simple way to get sources is
Chrome リモート デスクトップ - Chrome ウェブストア
このパソコンから他のパソコンに、または他のパソコンからこのパソコンに、インターネットを経由して安全にアクセスできるようになります。
Source MapでSass/Compassを簡単にCSSをデバッグする
Source MapでSass/Compassを簡単にCSSをデバッグする Sassはα版が公開されている3.3.0からSource Mapに対応しています。このSource Mapを利用するとCSSのデバッグや開発を簡単にしてくれるのでその方法を紹介します。 Sass/Compassで作成したCSSをGoogle Chromeのインスペクタで確認しようとすると以下のように対応するCSSファイルの行数が表示されます。 これでは何行目のScssファイルをいじったらよいかわかりませんが、Source Mapに対応させることで簡単にわかるようになります。 これは、「Google ChromeでCSSがSassの何行目に記述されているか確認する方法」のSource Map対応バージョンです。 インストール まずはターミナルから以下のコマンドを入力してSass3.3.0のα版をインストールしましょう
Learn web development | web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
Chrome extension, WebGL Inspectorが超便利
Canvas, WebGL開発で困るのがデバッグ。 HTML, CSSみたいに開発ツールで状態を確認することもできず、Canvas内がブラックボックスになること。 何がなんでどうなってるのか検討もつかない。 Chrome 拡張機能 WebGL Inspector を追加すると明るい未来が開けます。 WebGL Inspector by benvanik Chrome ウェブストア: WebGL Inspector 拡張機能を追加し有効にするとWebGL を使用していると画面右上に[Capture][UI]と表示されます。 [UI]を押すと画面下側にパネルが開きます。 これで様々状態を知ることができます。 アニメーションを遅くしたり、一時停止したりが可能です。 [Capture]を押すとその時点のスナップショットがとれます。 Githubでソースコードが公開されています。 今も頻繁に更新され
はてなブックマークのChrome Extensionを外した — どこか遠くでのんびり怠惰に暮らしたい
はてなブックマークのChrome Extensionを外した 以前からGoogleで検索して、検索結果ページを表示→どれかのページへ遷移→戻るボタンクリックとしたときに、 なぜか検索結果一覧ページじゃなくて、さらにもうひとつ前のページに戻ってしまう現象があって、 なんでこんなことになるんだろうとおもってたんだけど、どうもはてブのExtensionのせいだったらしい。 ふと「chrome google 検索 戻れない」で検索したら、 このページ がひっかかって、あ、もしかして、どれかextensionが悪さしているかなとおもって、順番にはずしていったところ、はてブのextensionだった。 たぶん、検索結果全部のURLのはてブ数をだしてるあたりの処理が終わらない間に、リンクをクリックしちゃって次のページに遷移すると、戻れなくなるのではないかという気がしてる。 まあ、そんなこんなでexten
Chrome Release Channels
Chrome supports a number of different release channels. We use these channels to slowly roll out updates to users, starting with our close to daily Canary channel builds, all the way up to our Stable channel releases that happen every 6 weeks roughly. Channels Windows 64-bit All channels may be run in parallel -- they install into distinct directories and use dedicated User Data directories. Stabl
Google ChromeでJavaScriptのデバッグをする際にはぜひインストールを！·JS Runtime Inspector MOONGIFT
JS Runtime InspectorはGoogle ChromeのJavaScriptデバッグを強力にサポートしてくれるソフトウェアです。 最近はJavaScriptを徹底的に活用したWebアプリケーションも増えてきました。そんな中デバッグは非常に困難になってきています。そこで使ってみたいのがJS Runtime Inspectorです。 インスペクタにJS検索フィールドが追加されます。 検索結果です。 そこから定義されている場所に簡単に飛べます。 利用例。 JS Runtime Inspectorを使えばJavaScriptを掘り下げて調べるのがとても簡単になります。関数名の他、値でも検索できるので目的の処理を見つけるのが簡単になるはずです。 JS Runtime InspectorはGoogle Chrome用、MIT Licenseのオープンソース・ソフトウェアです。 MOONG
chrome-devtools-autosaveを使って楽にCSSを編集しよう - wktkWebDiary
HTMLコーディングをしているときにChromeのDeveloper Toolsを使って、Chrome上で編集したスタイルがそのままCSSファイルに反映されるという、これまでのCSSコーディングを大きく変える(個人の感想です)node.jsで動く開発ツールの紹介です。node.jsとver.15以上のChromeが必要です。 作者のデモ： githubリポジトリ： GitHub - NV/chrome-devtools-autosave: Auto-saving CSS and JavaScript changes from the Chrome Developer Tools 使うまでにやることは多いですが、簡単なことばかりなので多分インストールに失敗することはないと思います。 Node.js をインストール chrome://flags/ にアクセスして、Experimental Ex
Using Sass source maps in WebKit Inspector
Here’s a second topic I talked about in my Fronteers 2012 jam session presentation. If you’ve been using a CSS preprocessor in your workflow, you’ve no doubt encountered this issue: you’re inspecting some element and want to edit the CSS, but finding that selector proves to be difficult as the inspector shows you file names and line numbers for your compiled CSS. If you’re using Firefox and Sass y
Google ChromeでiPhoneとかのtouch系イベントをエミュレートできるようになってた。これは便利。 | Ginpen.com
右上User Agentのところね。Emulate touch eventsにチェックを入れると、マウスのクリックやドラッグ＆ドロップでtouchstart, touchmove, touchendが発火するようになる。 開発時にいちいち実機やXcodeのエミュレーターを用意しなくても動作確認できるようになるのはとても便利。さすがにマルチタッチはできないけど、とりあえずエラーが出てないとかそういう確認ならできる。 ついでに隣の項目のOverrride User AgentでiPhoneやiPadを選ぶとなお良さそう。（ちなみにIEとかも指定できます。もちろんエミュレートはないけどね。） 画面サイズは、それを指定値に変更できるプラグインがあるから、探してみてください。 Settingsの項目は、なんか気がついたら（Chromeが更新されてて）変わってるから、ときどき覗いてみるといいんじゃない
Chrome Canaryのデベロッパーツールに直感的にCSSの色を変更して確認できるカラーピッカーが搭載されてた | WebDelog
CSS3のbox-shadowやtext-shadow、backgroundにグラデーションを指定した際など、 一回では思ったような色がつかず、 微調整を行うことがあります。 これまでは、FirebugのプラグインであるFirepickerというツールを利用して、 色を調整していたのですが、同様のものがCataryでも標準搭載されたようなので、 紹介しておきます。 Google Chrome Canaryとは、Firefoxで言うNightly、 ベータ版、開発版 よりも更に早い段階で新しい機能が試せるバージョンです。 →Chrome Release Channels ダウンロードはこちらからできます。 使い方 目的のページを開いて右クリック→要素の検証 または メニューより表示→開発/管理→デベロッパーツール を選択することでパネルが開きます。 Stylesに適応されているCSSが
こんな機能ない？ Google Chrome エクステンション（拡張機能） | ライフハックちゃんねる弐式
1 ：名無しさん＠お腹いっぱい。：10/01/03 01:20 ID:rRQ/8dav0 google chromeのエクステンション（拡張機能）について語るスレです chromeの本スレはこちら Google Chrome 20 プロセス目 http://pc12.2ch.net/test/read.cgi/software/1261054361/ 4 ：名無しさん＠お腹いっぱい。：10/01/03 13:06 ID:yHHzYWAE0 とりあえず今使ってるエクステンションを晒していこう 5 ：名無しさん＠お腹いっぱい。：10/01/03 16:02 ID:VtJqrtZf0 >>4 AutoPagerize for Chrome Chrome Gestures Drag and Go RSS Subscription Extension (by Google) SBM Counter
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS 20 stunning examples of CSS 3D transforms
Chrome Developer Tools のSourcesタブで指定した行に飛びたい
HTML5 Gaming benchmark: Fx10 vs Chrome on Windows 7