電子情報学特論: Chromium のアーキテクチャを解き明かす 〜 EEIC の授業が生きるプロダクトの世界〜 Kentaro Hara 2022 April (๑>ᴗ<๑) * * * *
2022年になりました。矢倉眞隆(@myakura)と申します。昨年に引き続き、新春特別企画のブラウザとウェブ標準を担当させていただきます。 なお、取り上げるトピックの数やインパクトの大きさもあり、CSSについては別記事となりました。あわせて読んでいただければ幸いです。 ChromeとFirefoxがバージョン100に到達 昨年の新春企画でもすこし触れましたが、今年はChromeとFirefoxのバージョンが100になります。 Chrome 100は、今年の3月29日にリリース予定です。もともとはもう少し先だったのですが、Chrome 94からリリースサイクルが4週間に短縮されたため、Chrome 100のリリースが早まりました。 Chromeよりも早く4週間のリリースサイクルに移行していたFirefoxも、5月3日にFirefox 100がリリース予定です。 バージョンが3桁になることで
こんにちは。虎の穴ラボのH.Hです。 今回は先日発表されたChromeの開発中の新機能であるRecorder機能について使用方法や利用する際の注意点などをまとめました。 Recoder機能とは ブラウザのChrome97で追加される予定の機能で、ブラウザの画面上で操作した記録を取得してくれる機能になります。 この記事を書いている2021年11月17日では一般に提供されているChromeの最新版は96となり、開発中の「Chrome Dev」もしくは「Chrome Canary」でRecorder機能を使用することができます。 利用している時の様子はChromeの開発者向けのページに公開されています。 developer.chrome.com 主な機能は以下の通りです。 ・操作の記録及び再実行(リプレイ)できる ・再実行時にパフォーマンスの記録・確認できる ・記録した内容の編集ができる ・操作
長年 Chromium (Chrome) ブラウザの開発に携わっていたのですが、やめてチームを移ることにしました。2021年10月1日が最後の日です。 チームを変わるだけで転職ではないのですが、結構いろいろやったなと思ったのと、瞬間最大風速的に沢山お礼を言ってもらって嬉しかったので、記録として書いておくことにしました。最初は褒めてくれてるtweetだけ貼ってドヤァ的なやつを作ろうかと思ったのですが😇、いい機会なのでやったことも書ける範囲で書いてみました。オープンソースはこういうとき気楽でいいです。 Personal update. After 10+ years I’m leaving Chrome and doing something else. I started with a small API and ended up owning entire Loading & Netw
DevTools とはElementsStylesComputedEvent ListenersDOM BreakpointsPropertiesAccessibilityConsoleメッセージスタッキングコンソールの履歴実行コンテキストの選択コンソール出力のフィルタリングコンソールの設定Sourcesコード行ブレークポイント条件付きコード行ブレークポイントコード行ブレークポイントの管理DOM 変更ブレークポイントXHR ブレークポイントイベントリスナーブレークポイント例外ブレークポイント関数ブレークポイントNetworkネットワークリクエストの記録読み込み動作の変更リクエストのフィルタリングリクエストの並び替えリクエストの分析リクエストデータのファイル出力Performance概要ペインフレームチャートペイン詳細ペインMemoryHeap snapshotAllocation inst
最近Chrome DevToolsについて調べていて発見した便利機能を紹介します。 誰もが使える最高便利な開発マシンChrome DevToolsを使いこなして開発体験を変えましょう! 1. $0で選択中のDOM要素の取得 特定の要素に何かしたいという時には、要素のIDやclassを確認してConsoleでdocument.querySelector("#xxx")で取得するというのが一般的だと思います。実はそれはカーソル選択と$0で代替できます。 Classや、IDがついていない特定のDOMを取得したい時とかにも使えるので地味に便利です。 手順 カーソルで取得したい要素を選ぶ Consoleタブで$0を入力 最近知ったChrome DevToolsの便利機能① $0 での選択中のDOM要素取得 Elementsタブで選択状態のDOM要素は、Console上で $0 を入力することで取得で
Windows10が4月30日に April 2018 Updateとしてリリースされました。 主な機能は別記事として掲載するとして、現在ChromeやColtanaなどを使用しているとWindowsがフリーズ及びハングアップするようです。 フリーズすると何も受け付けてくれなくなる フリーズするとどうなるか・・・。パソコンが固まった状態となり、何も動いてくれなくなります。 Win98時代とかよくフリーズ⇒再起動をしていたのですが、最近はあまり聞かなくなりましたね。それでも実経験上たまに発生しています。 Ctrl+Alt+Delが効かない ハングアップの発生や処理が遅くなった場合はよくCtrl+Alt+Delを使ってタスクマネージャーを開こうと試みることが多いと思われます。 タスクマネージャーを開くことで、動作不良を起こしているアプリケーションの特定し強制終了の実施やシステムの再起動まで実施
デスクトップ版のGoogle Chromeでリーダーモードが利用可能になっている(Issue 925965、 The Vergeの記事、 Neowinの記事)。 リーダーモードはAndroid版Chromeの「簡易表示」を移植したもので、Chrome Canaryではchrome://flagsの「Enable Reader Mode」をEnabledにすることで利用可能になる。安定版のChrome 73にフラグは用意されていないが機能自体は実装されており、コマンドラインで「--enable-dom-distiller」を付けて起動すれば利用できる。 現在のところ専用の切り替えボタンは用意されておらず、有効化するとメニューに追加される「ページを抽出」で切り替える仕組みだ。正常に表示できるかどうかとは関係なく、任意のページで切り替えることができる。なお、リーダーモードで再び「ページを抽出」を
Webパフォーマンス向上施策のために、今更ながら超速本1を読んだので、今までの自分の知見と合わせてまとめてみます。 なるべく柔らかく、改善施策ってまず何をどうすればいいの?という疑問を持った人に向けて書いています。 ▪️格言 そもそもWebは速い。遅くしているのは我々です。大抵は技術の問題ではなくて、人の問題。 引用元: テクニックではなく、今、本気で取り組むべきWebパフォーマンス (html5jパフォーマンス部 部長 竹洞さん) 心得 パフォーマンス向上に対する施策は大別すると以下の2通り 軽量化 (単純にやりとりするデータ容量を小さくすること) 圧縮 削除 最適化 (その時に最も適している実装・実行をとること) 経路・順番の変更 非同期 もっとも遅くしている原因を探して、それを対策するのが原則。「対効果」が絶対的正義である。手段から入るのは愚策。まず先に原因を知ることが重要。 ▪️1
つい最近、初めて作った Google Chrome エクステンション「Feedly をはてブ対応させる Chrome エクステンション」をブログで紹介したので、その時の技術的なメモなどを Qiita に残しておきたいと思います。まあ検索すればすぐに集まる程度の情報ではあるものの、一箇所にまとまってなかったので、自分用の備忘録でもあります。 全てのソースコードは github 上で公開しているので、気になる方は参考にしてみて下さい。実際に書いたスクリプトの簡単な解説もこの記事の最後に付録として付けています、 超最低限な Chrome エクステンションの作成 Chrome エクステンションは基本的に、一つのフォルダに保存された複数のファイルからなります。エクステンションのルートに必要な最初のファイルは、manifest.json というファイルで、これがエクステンションの基本的な情報を含んでい
疑惑どころか 99.99% くらい黒な話。 (後記:セッション盗まれたと思ってたけど、よくよく考え直してみると生パスワードごと盗まれてる可能性もあるしやばい) 追記:続報 11月3日 今回指摘した HTTP Headers 以外にも、「Tab Manager」「Give Me CRX」「Live HTTP Headers」等で同様(?)の問題が報告されています。第三者が元の作者からソフトウェア権利を買い取って悪用する、というケースが割とある模様(?)。皆さま情報ありがとうございます。 11月4日 Zaif については、「不正な Chrome 拡張」と「スクリプトから保護されていなかったクッキー」のコンボによりセッションが盗まれていた可能性あり。 Zaif のセッション情報が盗まれた原因のひとつについて。JavaScript からクッキー値を取得させない方法。 - clock-up-blog
Change the web at will with userscripts Enhance your browsing experience with Tampermonkey! 🌐🚀 Tampermonkey is a versatile browser extension with over 🔟 million users that enhances your browsing experience by allowing you to run userscripts on websites. Userscripts are small programs that modify page layouts, add or remove features, and automate actions to personalize your web experience. ###
以前の記事で、 Webアプリケーションのデバッグの仕組み について触れました。今回は実践的なJavaScriptのデバッグについて掘り下げていきたいと思います。 ブラウザデベロッパツール 私の個人的なお気に入りはChromeデベロッパツールです。SafariやFirefoxはChromeほどの高水準に達していません。しかし、徐々に改善されてきています。FirefoxにはFirebugと改良されたFirefoxデベロッパツールが組み合わされた機能が備わっています。もし、Firefoxチームがビルトインされているデベロッパツールの改良の中で素晴らしい仕事をし続けたとしたら、Firebugはいつか、すたれるかもしれません。 個人的な好みにかかわらず、ターゲットとするあらゆるブラウザで、全てのコードのテストやデバッグができるようにすべきです。”あらゆるブラウザ”には、かの有名なInternet E
「Iconic History」はGoogle Chromeの閲覧履歴をファビコンで表示してくれる拡張機能です。閲覧履歴をファビコンで一覧でみることができますよ。パッとみてどのサイトをよく見るかがわかったりします。 以下に使ってみた様子を載せておきます。まず、Iconic Historyへアクセスしましょう。Google Chromeに拡張機能をインストールします。 Iconic HistoryからGoogle Chromeの閲覧履歴をみるとこのようになります。パッとみて青色のアイコン(Google)が多いことが分かりますね。目立つファビコンのサイトがあれば、ひと目でいつアクセスしたか確認できます。また、ファビコンをクリックすると、該当ページにアクセスできますよ。一度試しに入れてみると面白い結果がみれるかもしれませんね。 Iconic History (カメきち)
今回は私が実際に使っていて便利だなぁと日頃思っているおすすめのChrome拡張機能を紹介します。 Google Mail Multi-Account Checker https://chrome.google.com/webstore/detail/google-mail-multi-account/mcpnehokodklgijkcakcfmccgpanipfp メインのアカウントとSNSやブログ関係のアカウントを使い分けているのでこれが無いとめちゃくちゃ不便。これのおかげでメーラーアプリはめったに立ち上げなくてもよくなりました。 HD for YouTube™ HD for YouTube™ - Chrome Web Store YouTubeを開くと強制的に最高画質に変更してくれる優れもの。 ちょっとの手間だけどあったらやっぱり便利。 Speed Dial [FVD] Speed D
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く