モバイル開発に役立つJSデバッグ術 | メルカリエンジニアリング
Mercari Advent Calendar 2017 13日目は フロントエンドチームの @sottar が web アプリの開発（特にモバイル開発）で役立つ Chrome DevTools の便利な機能を紹介します。 はじめに メルカリでは PC からのアクセスよりもモバイルからのアクセスが多いため、web アプリもモバイルからのアクセスを意識したコードを書く必要があります。 しかしモバイル向けのコードを書く際に、毎回実機を接続して確認するのは面倒です。そこで最近のブラウザに付属している開発者ツールにはモバイル向けのコンテンツの開発に役立つ機能が搭載されているため、その機能を使いこなすことでモバイル向けの開発をしつつ、開発のスピードを上げる事が可能です。 そこで本日は Chrome DevTools 内にある、特にモバイルデバイス向けのコンテンツ開発に役立つ機能を紹介します。 Dev
Google、Chromeのシークレットモードでアクセスする全ての非HTTPSページに「保護されていない通信」ラベルを。今年10月から
[レベル: 中級] Google は、Chrome ユーザーのプライバシー保護をより一層強化することにしました。 次のどちらかの条件に当てはまるページに Chrome でアクセスした場合、URL 欄に「保護されていない通信」のラベルが付きます。 データを入力する HTTP ページ シークレットモードでアクセスする すべての HTTP ページ パスワードとクレジットカード情報だけじゃない 1月にリリースされた Chrome 56 から、パスワードまたはクレジットカード情報を HTTP 通信で送信するページ、言い換えると HTTPS ではない通信でそれらの情報を送信するページには、URL 欄に「保護されていない通信」というラベルが表示されるようになりました。 この仕様を Google はさらに一歩推し進めます。 情報を入力する すべての HTTP ページ パスワードとクレジットカード情報に限ら
HTTPでフォーム送信するサイトにGoogleが警告を一斉送信、Chrome62から実装するセキュリティ警告に備えてHTTPS移行を促す
[レベル: 中級] 非 HTTPS (HTTP) のページでテキストをフォーム送信する要素を持つサイトを対象に、Google は先週末いっせいに警告メールを送信しました。 Chrome 62 から実装予定のセキュリティ警告 次のメールが Search Console 経由で届きます。 Chrome のセキュリティ警告を http://example.com に表示します http://example.com の所有者様 2017 年 10 月より、ユーザーが Chrome（バージョン 62）で HTTP ページのフォームにテキストを入力すると、「保護されていません」という警告が表示されるようになります。また、シークレット モードを使用している場合は、HTTP ページにアクセスするだけで「保護されていません」と表示されます。 貴サイトでは、たとえば以下に示す URL に、Chrome の新し
Android実機のデバッグが激しく捗る「Webインスペクタ」
Web制作の「時短」に役立つChromeデベロッパーツールの活用法を紹介する本連載。第4回は、Android端末に表示しているWebサイトを、Chromeデベロッパーツールで検証する「Webインスペクタ」を解説します。 特定デバイスでのバグ、表示崩れの原因を調べたい スマートフォン向けにコーディングをしていると、特定の端末でしか発生しないバグや表示崩れがあります。「特定の端末」の場合、第1回で解説した「Device Mode」では問題が再現せず、原因の特定は困難です。 原因を特定するには、バグ、表示崩れが発生した端末でChromeデベロッパーツールの「Webインスペクタ」を使って、問題のWebページを表示しながら検証します。 Webインスペクタの設定方法 Webインスペクタに使用するAndroid端末の設定を変更します。設定画面を開き、「開発者向けオプション」を表示します。
安室奈美恵のPVで、Chromeがバグる？
いや、新しい映像表現でした！ 指で触れて楽しめるPVも話題ですが、安室奈美恵さんの新曲PVがそれ以上にすごいかも。 まず、サムネイルがあらぬ方向に飛んでいきます。 別窓も勝手に開きます（ちょっとブラクラかと思った…）。 勝手に立ち上がったウインドウが3つ並ぶ中を安室ちゃんが闊歩！ ちなみに、アドレスバーには常に歌詞が流れているという手の込みよう。 実はこれ、Google Chromeの拡張機能をフルに使った、｢Namie Amuro "Anything" for Google Chrome｣という新しい試み。 なので、Chromeをダウンロードした上で、Chrome拡張機能をインストールする必要があります。でも、絶対入れて体験したほうがいいですよ。 最後まで見た人には、とあるプレゼントが安室ちゃんからzipで届きます。 制作したのは、｢進撃の巨人展｣でのOculus Riftを使った360
ウェブのプッシュ通知、何がそんなにすごいのか？
3 月 13 日、Chrome Beta のブログポストが出ました。Android 版 Chrome でプッシュ通知が使えるようになったのが個人的なハイライトです。 「確かにプッシュ通知は便利かもね〜」と思ったあなた、驚きが足りません。のけぞるべきです。小躍りするべきです。 理由を説明します。 ユーザーエンゲージメントが変わる # あなたのウェブサイトのビジネスモデルが広告モデルにしろ課金モデルにしろ、ユーザーが繰り返し訪れてくれることは大前提です。通常のウェブサイトやサービスは、そのための策を練ります。そのきっかけをサービス側から能動的に与えることで、ユーザーが戻ってきて、ビジネスは回ります。しかし、そのきっかけを与える方法は、非常に限定されていると言わざるを得ません。 インターネットが普及し始めた当初から伝統的に利用されているのがメール、数年前から利用されているのがソーシャルメディア、
Google ChromeのCPU使用率を下げるために、私が行ったことまとめ。Chorome.exeが悪さをしているなと思ったらお試しを！ - SONOTA
photo by stshank パソコンの引っ越しをしたら、CPU使用率がとんでもないことになって、何度かブルースクリーンエラーを出してしまった私…。 特にインターネット閲覧とブログの執筆くらいにしか使っていないはずなのにと思ってチェックをしたら、どうやらGoogle Chromeが悪さをしていたみたいです。 Google ChromeのCPU使用率を引き下げる： そこでインターネット上で、Google ChromeのCPU使用率を引き下げる方法を探してみました。見てみると様々な手法があるようなので、それぞれの記事を簡単にまとめてみたいと思います。 タスクマネージャーでどれが悪さをしているか調べる： Google Chromeにはタスクマネージャーといって、どのプラグインやタブが悪さをしているかどうかを確認する方法があります。まずは下記サイトを参考にして、タスクマネージャーを見てみるとこ
フロントエンドエンジニアになってから11ヶ月間で覚えたちょっと捗るChromeの使い方 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 昨今のWebブラウザはどのような機能があるのか把握するのも大変なほど多機能で便利ですよね。 Webブラウザの機能を把握してうまく使いこなせること（とくに開発者ツール）が、フロントエンドエンジニアの前提スキルになってきてるのかなぁと感じる今日この頃です。 ということで自分のデフォルトの開発用ブラウザはChromeなのですが、これを覚えて捗ったなぁということをメモしていこうと思います。 思い浮かんだら追記していこうと思っているのでストックして頂けると幸いです。 基本系 キーボードショートカットを覚える Chromeのキーボードショ
Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能
Webアプリのデバッグやチューニングに役立つ、Chrome Developer Toolsの主要機能を、スクリーンキャプチャ中心で簡潔に紹介。2014年10月に最新情報に改訂。 モダンブラウザーの中でGoogle Chromeは最後発ながら、その機能の潤沢さ、便利さ、高速さからシェアを大きく伸ばしている。そして、今やほとんどのブラウザーではWindowsの場合F12キーを押すことで（Macの場合はCommand＋Option＋Iキーで）手軽に各ブラウザー搭載のデベロッパーツールを利用できるが、特にChromeのデベロッパーツールは、非常に機能が豊富なため、利用している人もかなり多い。 本稿では筆者がよく使う機能や、使うと便利な機能を中心に、Chromeのデベロッパーツールについて紹介していく。なお、本書は執筆時点で、最新のChrome 38を使用している。 機能ふかん 残念ながら、Chro
意外と知らないChrome Developer Toolsの便利な機能 - Qiita
参考資料がすべて英語なので、日本語で情報がまとまってる場所が欲しいと思いこの記事を作りました。「俺もっと便利な機能知ってるぜ！」「こういうことできないの？」って思った人はコメント/編集リクエストをくれると僕の幸せのステージがどんどん上がります。 DevToolsの起動するショートカットキーは？ 開くだけ F12, Ctrl + Shift + I (Win, Linux) Opt + Cmd + I (Mac) 要素の検証(Inspect Element)と同じ状態で開く Ctrl + Shift + C (Win, Linux) Shift + Cmd + C (Mac) Consoleタブが開いた状態で開く Ctrl + Shift + J (Win, Linux) Opt + Cmd + J (Mac) DevToolsって下じゃなくて右に持ってこれないの？ Dock To Righ
Chrome Developer Toolsを使いこなそう！
1. Chrome Developer Tools を 使いこなそう！ 2013/04/02 Google Developers Live Japan #3 このスライドを使ったセッションはこちら → http://bit.ly/YYtStr Toru Yoshikawa (@yoshikawa_̲t) 2. Who? 吉川 徹 / Toru Yoshikawa @yoshikawa_̲t Google Developer Experts (Chrome) html5j/HTML5とか勉強会スタッフ Web先端味⾒見見部 顧問 ⽇日本jQuery Mobileユーザー会 管理理⼈人 Sublime Text 2 Japan Users Group 管理理⼈人 allWebクリエイター塾/jQuery Mobile担当講師 Blog:
Chromeのリモートデバッグ機能がすごい！ - Hacking My Way 〜 itogのhack日記
ここの動画で紹介されているリモートデバッグがかなり強力なツールなので紹介します。 事前準備 開発マシン側にadbというツール＆Android端末のUSBデバッグを有効にする必要があります。 開発してる人なら説明いらないので省略。 リモートデバッグを有効にする Android端末と開発マシンをUSBで接続して、端末が認識されていることを確認して下さい。 開発マシンのターミナルで以下コマンドを打ちます。 $ adb forward tcp:9222 localabstract:chrome_devtools_remote Android端末のChrome for Androidでメニューから 設定→デベロッパーツール→USBウェブでバッグを有効化にチェック 開発マシンのブラウザで下記URLにアクセスします。 localhost:9222 すると、Chrome for Androidのタブで開い
Google Chrome、マルチプロセスで動作する理由
Chromium - News and developments from the open source browser project Google ChromeはGoogleからリリースされ、とにかく動作が速いということで注目を集めた。ただし高速なのは興味深いことだが、ほかのブラウザでも積極的に改善が進められているためブラウザ事情に精通したデベロッパはさほど驚かなかっただろう。デベロッパとしてはむしろ、単一のプロセスではなく複数のプロセスを生成して動作するという点に興味を持ったのではないだろうか。Chromeには既存のオープンソースプロジェクトの成果物が活用されているため、実装の新規性よりも組み合わせや改善のうまさが際立つ。新アイディアという点で見ると、Chromeで注目すべきはマルチプロセスアーキテクチャという設計にある。 マルチプロセスアーキテクチャについてはMulti-proc
Chromium プロジェクトの新しいレンダリングエンジン Blink のご紹介
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
Google、「Chrome for Android v28」の安定版をリリース|ガジェット通信 GetNews
Googleは7月11日、Android向けブラウザアプリ「Chrome for Android」の新バージョンv28（28.0.1500.64）の安定版のリリースを発表しました。Chrome v28では、WEBページのレンダリングエンジンが“Webkit”から独自の“Blink”に刷新されています。新機能としては、Google翻訳によるWEBページの翻訳機能が追加され、WEBページの内容がAndroidの設定言語と異なる場合に、画面下部にGoogle翻訳のツールバーが表示され、文章を翻訳することができるようになりました。もちろん、翻訳後に原文に切り替えることもできます。また、タブレット向けのユーザーインタフェースがフルスクリーンモードに対応し、WEBページを画面全体で表示することができるようになりました。さらに、実験機能として実装されているSPDYプロキシを利用したデータ圧縮オプションに
グーグルがWeb描画エンジンを新開発、WebKit派生の「Blink」をChromeへ
米グーグルは2013年4月3日、新しいWebレンダリング（描画）エンジン「Blink」の開発を始めると発表した。BlinkはオープンソースのWebレンダリングエンジン「WebKit」の派生品で、その置き換えを狙ったものである。これまでWebKitを採用してきたAndroidやChromeブラウザーでは、順次Blinkへの移行を進めていく計画という。 「WebKit」は米アップルが開発を主導してきたオープンソースのWebレンダリングエンジンである。元々はMac OS XのWebブラウザー「Safari」で使用するために開発されたものである。当初はインタフェース部分がオープンになっていなかったが、2005年に完全にオープンソース化した。その後、iOSのWebコンポーネントにも採用され、Mac OS XやiOS搭載製品の普及によって利用者が次第に増えていった。 普及という意味で決定的だったのが、
Chrome拡張機能にpush通知をしよう
Chrome拡張機能にpush通知をしよう：Google Cloud Messaging for Chrome入門(1)（1/2 ページ） 簡単なGoogle Chrome拡張機能を作成し、それにGoogle Cloud Messaging for Chrome機能を追加しましょう。 Google Cloud Messaging for Chromeとは何か 2013年5月より、Google Cloud Messaging for Chromeのサービスが開始されました。 Google Cloud Messaging for Chrome - Google Chrome chrome.pushMessaging - Google Chrome API Reference for GCM service - Google Chrome Google Cloud Messaging (GCM)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ChromeでAmazon商品の価格変動をチェック Keepa.com - Price Trackerで遊ぼう!! - 週刊アスキー
【2019年版】これは便利！おすすめのChrome拡張機能32選
「Google Chrome Deveoper Tools」はこう使う！ 基本機能チュートリアル & GDD 2011 セッション概要
