Web制作者は要チェック！Chrome 68でアップデートされたデベロッパーツールの新機能
25日の昨日にリリースされたChrome 68で、ブラウザと共にアップデートされたデベロッパーツールの新機能を紹介します。 ブラウザの方は、以前から伝えられていた通り、http通信の際に「保護されていない通信」と表示されるようになりましたね。 What's New In DevTools (Chrome 68) コンソールの補助機能 より素早く、信頼性が高いUIとAudits BigIntのサポート Add property path to watch Show timestampsの移動 コンソールの補助機能 Chrome 68では、オートコンプリートやプレビューに関連する新しいコンソール機能が加わりました。 式の結果をプレビュー コンソールに式を入力すると、その式の結果をカーソルの下にプレビューできるようになりました。 sort()の結果をプレビュー Consoleをクリックして、コン
Web制作者は使わないと損！Chrome 59でアップデートされたデベロッパーツールの便利な新機能
5日にリリースされたChrome 59で、ブラウザと共にアップデートされたデベロッパーツールの新機能を紹介します。 What's New In DevTools (Chrome 59) Chrome 59 - What's New in DevTools -YouTube ページの軽量化: 未使用のCSSとJavaScriptを見つける フルサイズのスクリーンショットをキャプチャ リソースのロードをブロック 非同期コードの検証 コマンドメニューの統一 ページの軽量化: 未使用のCSSとJavaScriptを見つける 新機能の一つ目は「Coverage tab」。ページで使用されていないCSSとJavaScriptを見つけることができます。 command + shift + P で、「Show Coverage」を入力して選択。 ※「cov」まで入力すれば、上位に表示されます。 Show
Chromeの秘密のURL一覧
fossBytesに9月2日(米国時間)に掲載された記事「Complete List of "Secret" Chrome URLs And Their Uses」が、Google Chromeが提供している内部アクセス用のURLを掲載した。これらは内部情報の確認、実験的機能の利用や細かい調整などをするためのもので、どのようなURLが用意されているかは「chrome://chrome-urls」にアクセスすると表示される。記事ではどのURLがどの目的で用意されているかが説明されている。 掲載されているURLは次の通り。 chrome://chrome-urls - 内部用URL一覧を表示 chrome://accessibility - タブごとにアクセシビリティ機能の有効無効を設定 chrome://appcache-internals - アプリが使用しているキャッシュライズを表示 c
New in Chrome 58 | Blog | Chrome for Developers
The IndexedDB 2.0 standard is now fully supported in Chrome, and features new schema management, bulk action methods, and more standardized handling of failures. Progressive Web Apps become more immersive with display: fullscreen. allow-top-navigation-by-user-activation gives sandboxed iframes new powers And there's plenty more! Want the full list of changes? Check out the Chromium source reposito
Githubをいい感じに表示してくれる、4つのブラウザ拡張 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
けもフレPPPのジェンツーちゃんがかわいすぎて、Gentoo Linuxインストールしたくなりました、TKです。 今回は、みんな大好きGithubをいい感じに表示してくれるブラウザ拡張を、4つご紹介します。Google Chrome版とFirefox版のリンクを記載しているので、自分の環境に合わせてインストールしてください。 いい感じのブラウザ拡張 GitHub Hovercard Chrome Web Store Mozilla Add-ons Store このブラウザ拡張を入れておくと、なんとリポジトリやユーザーページへのリンクにカーソルをホバーさせたときに、ツールチップでサマリーを表示させることができるんですっ！ 正直なところ、これを入れていて良かったなぁというシーンは今のところありません。見た目が良いので、ニヤニヤしながらホバーしてツールチップを眺めるのがナイスな使い方かなと思って
JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～ - Qiita
※2017/4/21にオンロード時のデバッグ方法8を追記しました！ こんにちは！エイチーム引越し侍の加藤です！ みなさんJavaScript書いてますか？ console.logめっちゃ使うよねーって人は目からうろこのデバッグ方法を、 ケース毎に紹介していこうと思います。(僕はconsole.log使いません) サーバーにデバッグ用のコードをアップロードすること無いので、 消さずに意図に反してリリースしてしまう危険性がないのもお勧めです。 前提知識 F12で出てくるデベロッパーツール(Elements, Console, Source, Network)の知識 Ctrl+Shift+Fで外部ソース(js,css)に対して一括検索ができる HTML、CSSはElementsから直接修正⇒確認ができる jsはSourceから直接修正できる(Ctrl+Sで保存したらその状態で実行できる) jsは
最高にわかるChromeデベロッパーツールの使い方(チートシート付き)
作成：2016/07/11 更新：2017/04/16 Web制作 > 使い方 初めてデベロッパーツールを触る人でも分かるように、簡潔・シンプルに書きました。画像付きのチートシートのようなものですね。今回は初心者の方向けということでChromeデベロッパーツールの入門編。Chromeは最新版です。 エンジニア速報は Twitter の@commteで配信しています。 設定 背景色を黒にする タブの幅を変える エディタ エディタとして使う ローカルファイルのコードを整形する コンソール ログの閲覧・JavaScriptの入力や練習 エレメント 編集 CSS内の画像サイズと大きさを知る カラーフォーマットの変更 Breakpoints / クリックされた時のコードを見つける モバイル 回線速度のエミュレート 通信環境を選択 Androidデバッグ モバイルデバックの実機を増やす ネットワーク
Chrome Developer Toolsでパフォーマンス計測・改善 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Chrome Developer Toolsを使ったWebページのパフォーマンス計測・改善についての説明です Networkパネル、Timelineパネル、Profilesパネルの使い方を説明してから パフォーマンスの計測・改善について説明していきます Networkパネル Networkパネルはページのリクエストをしてからの通信内容の一覧を表示します 記録方法 左上のRecordボタンを押すと記録が始まる もう一度押すと記録が停止する 必要に応じて、Disable cacheやCapture screenshotsを設定する 表示項目
HTTP Headers という 5万人が使っている Chrome 拡張のマルウェア疑惑。セッション盗まれて BTC も盗まれそうになった話。 - clock-up-blog
疑惑どころか 99.99% くらい黒な話。 （後記：セッション盗まれたと思ってたけど、よくよく考え直してみると生パスワードごと盗まれてる可能性もあるしやばい） 追記：続報 11月3日 今回指摘した HTTP Headers 以外にも、「Tab Manager」「Give Me CRX」「Live HTTP Headers」等で同様（？）の問題が報告されています。第三者が元の作者からソフトウェア権利を買い取って悪用する、というケースが割とある模様（？）。皆さま情報ありがとうございます。 11月4日 Zaif については、「不正な Chrome 拡張」と「スクリプトから保護されていなかったクッキー」のコンボによりセッションが盗まれていた可能性あり。 Zaif のセッション情報が盗まれた原因のひとつについて。JavaScript からクッキー値を取得させない方法。 - clock-up-blog
JavascriptのChromeでのデバッグ方法個人的まとめ2016 - Qiita
はじめに Javascript開発でよく使ってるデバッグ方法についての個人的なまとめです。 当たり前の事ばかりですが、これからJavascript開発をやる方や興味がある方に少しでもお役に立てればと思います。 デバッグの鉄板 console.log Javascriptの開発でconsole.logを使わない人を探すほうが難しいくらいだと思います。
Falcon - 便利すぎる！履歴全文検索が可能なChrome拡張 | ソフトアンテナ
Webブラウザーを使用している際、閲覧したはずのサイトが後から分からなくなってしまった経験は誰でもあると思います。通常ブラウザには閲覧履歴として、URLとタイトルが保存されていますが、これらの情報だけでは役に立たない事も多いからです。 「Falcon」はこのような場合に役に立つ、履歴の全文検索が可能なChrome用の拡張機能です。タイトルやURLだけではなく、Webページのコンテンツに対して全文検索することができるので、過去に閲覧したサイトをもう一度探し出したいときに役に立ちます。 使用方法 Falconを使用するには、Chromeウェブストアから拡張をインストールするのが簡単です。 アドレスバーで「f + tab」または「f + スペース」をタイプするとfalconのアイコンが表示されます。この後検索したいキーワードを入力すると全文検索が実行できます。 検索バーでは以下の様な書式を使用す
Flash排除の動きを強化した「Google Chrome 53」安定版リリース
ウェブブラウザ「Google Chrome」の最新安定版であるバージョン「53.0.2785.89」のWindows版・Mac版・Linux版がリリースされました。主に開発者向けの変更が行われていますが、以前から言われていたFlash排除の動きは前進しており、ウェブページ解析などのためにバックグラウンドで稼働するFlashはブロックされ、HTML 5が使われるようになっています。 Chrome Releases: Stable Channel Update for Desktop http://googlechromereleases.blogspot.jp/2016/08/stable-channel-update-for-desktop_31.html 新たに搭載された開発者向けの機能については以下のムービーで解説されています。 Chrome 53: Shadow DOM v1, Pa
Google、WindowsやMacの「Chromeアプリ」終了へ、Chrome OSのみに
米Googleは8月19日(現地時間)、Windows/Mac/Linux向けのChromeアプリの提供を終了させる計画を明らかにした。段階的に縮小しながら、約1年半後にサポートを完全終了させる。Chrome OSでのサポートは継続する。 ChromeアプリはHTML5、CSS、JavaScriptで構築されたWeb技術ベースのアプリで、WebブラウザChromeやChrome OSで使用できる。パッケージ型アプリとホスト型アプリの2種類があるが、Chrome OS以外のプラットフォームではどちらも終了になる。パッケージ型は、ブラウザの外側で独立したアプリのようにふるまい、またオフライン機能に優れる。Web技術ベースのアプリの短所を埋めるようなアプリになっているが、GoogleによるとWindows/Mac/Linuxでパッケージ型アプリをアクティブに使用しているユーザーは約1％にとどまる
さよならFlash。Chromeが年内にFlashコンテンツのブロック開始へ
さよならFlash。Chromeが年内にFlashコンテンツのブロック開始へ2016.05.17 12:505,237 塚本直樹 やっとFlashから離れられる…か？ もはやウェブブラウジングのお荷物と言っても過言でない｢Flash｣。これまでインタラクティブなコンテンツの表示に役立ってきましたが、とうとうアドビ自身がHTML5への移行を即すなど、その寿命を終えようとしています。そしてこの度、GoogleのChromeブラウザが年内にもFlashコンテンツのブロックを開始することが判明しました。 以前から、ChromeはほとんどのウェブサイトでFlashの動作を停止していますが、今年のQ4（10〜12月）からはユーザーが許可したFlashコンテンツ以外はすべてブロックされます。 ただし、YouTube、Facebook、Yahoo、Twitch、Amazonなど10個のサイトは1年限定でこ
Chromeのオリジナル拡張機能を開発しよう（ソースコードあり） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Chromeの拡張機能とは？ Chromeの拡張機能は実質的にはただの圧縮したフォルダです。そして、そのフォルダの中身もただのHTMLやCSS、JSファイルです。 つまり、拡張機能の作り方はWebページのそれとは大差ないということですね。 拡張機能にしか提供されていない豊富なChromeのネイティブのAPI群（Chrome.* API）を利用できるところが拡張の魅力です！ 一般公開目的ではなく、普段の業務効率化目的でも十分な利用価値があると思うので、まだの方はぜひ一度触ってみてください。 拡張機能の種類 拡張機能の種類は大きく分けて3つあります。 Browser actions Page actions Override Pages 1つずつ見ていきましょう。 Browser actions ツールバーの右側に小さなアイコンを表示させるタイプの拡張機能です。一番頻繁に見かけるのがこのタイプ
Chrome 拡張機能のマニフェストファイルの書き方 - Qiita
お断り (2022-12-13 追記) この記事はマニフェストのバージョンが 2 の時点で作成したものですが、マニフェストの最新バージョンは 3 であり、Chrome Web Store においてはバージョン 2 の拡張機能が すでに受け付けられない状態 です。 それでもなおこの記事を参照される場合は、公式の マイグレーションガイド も合わせてご確認いただければと思います。 Overview https://developer.chrome.com/extensions/manifest についての自分用おぼえがきです。 マニフェストファイルの書き方にフォーカスしていますので、個々の用語の説明などは端折ったりしています。 記載が必須の項目 以下の項目は、マニフェストファイルに必須です。 manifest_version マニフェストファイル自身のバージョンです。 現在のバージョンは 2 で
食べログのレビュー点数を正規化するChromeの拡張機能「Tabelog-HonestStars」
ランキングと口コミからレストランを検索できる「食べログ」は、さまざまなユーザーの意見を参考にできるので、レストランを選ぶ際には重宝します。そんな食べログはレビュー点数の不正操作を防ぐために、点数が「3.0～3.5」に収縮する方式を採用していますが、その点数を正しく表示してくれるGoogle Chromeの拡張機能「Tabelog-HonestStars」が登場しました。 miyagawa/Tabelog-HonestStars · GitHub https://github.com/miyagawa/Tabelog-HonestStars/ 食べログの「ランキング・点数について」のページを見ると、食べログの点数はお店のジャンルへの「食通度合い」から算出している「レビュアーの影響度」が関係しており、単純に平均点を算出したものではありません。 独自の算出方法で計算した結果、食べログで「3.50
JavaScriptを補完してウェブを高速化する「WebAssembly」をChromeがついに実装したので実行速度を試してみた
「WebAssembly」は、JavaScriptの生みの親のブランダン・アイクが「ゲームチェンジャー」と表現するほど期待されているウェブ向けのバイナリフォーマットです。モバイル端末やIoT端末の普及が見こまれる中、マシンパワーの劣る端末でも効率よく実行できるように、ウェブの標準言語と言ってよいJavaScript以外の言語をコンパイルするためのユニバーサルなローレベルバイトコードが求められていましたが、ブラウザ開発者はそれぞれ独自にツールを開発する状況でした。 そんな中、2015年6月にMozilla、Google、Microsoft、Appleなどのウェブブラウザの主要プレイヤーが標準フォーマットとして開発に合意したのがWebAssemblyで、プロジェクトを推進するWebAssembly Community Groupが結成され、まずはC/C++をコンパイルしてJavaScriptエ
Googleが次期「Chrome 50」で搭載のJavaScriptエンジン「V8 5.0」を発表 | OSDN Magazine
Googleは3月15日、JavaScript実行エンジン「V8」の最新版「V8 5.0」を発表した。ECMAScript 2015（ES6）のサポート強化などが加わるもので、4月後半が見込まれる「Chrome 50」安定版リリースに合わせて正式版となる。 V8はGoogleが作成するJavaScriptエンジン。C++で実装されており、ECMASciptの標準規格であるECMA-262に準拠する。GoogleのWebブラウザ「Google Chrome」や「Android Browser」に組み込まれているほか、Node.jsのJavaScriptエンジンとしても使われている。ライセンスは修正BSDライセンスで、Windows XP以降、Mac OS X 10.5以降、Linux（IA-32/ARM/MIPS）をサポートする。 V8のリリースプロセスはChromeと密に結びついており、C
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「Google Chrome 56」が正式版に。HTML5デフォルト化がすべてのユーザーを対象に開始
