Chrome 116 デベロッパーツールの新機能が便利！ 正常に読み込まれなかったスタイルシートのデバッグが簡単に
先日リリースされたChrome 116 デベロッパーツールの新機能で、正常に読み込まれなかったスタイルシートを簡単にデバッグできるようにするための多くの改良が加えられました。 What's New in DevTools (Chrome 116) 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 正常に読み込まれなかったスタイルシートのデバッグ 正常に読み込まれなかったスタイルシートのデバッグ Chrome 116のデベロッパーツールでは、欠落しているスタイルシートの問題をより迅速に特定し、デバッグできるようにするために多くの改良を加えました。 「ソース」>「ページ」ツリーで、正常に読み込まれたスタイルシートのみが表示されるようになり、混乱が最小限に抑えられます。 「ソース」>「エディタ」で
Chrome Devtoolのmonitorを使うと関数の呼び出しを観察できて便利 - ぱすたけ日記
を読んで思い出したのでご紹介です。 元の記事と同様に以下の関数 sum について、 function sum(nums, acc = 0) { console.log({ nums, acc }); if (nums.length === 0) return 0; if (nums.length === 1) return nums[0]; return sum(nums.slice(1), acc + nums[0]); } この関数sumの引数 (nums と acc) の呼び出しごとの変化を見たい場合は、所謂プリントデバッグや debugger を使うのは一般的なテクニックとしてよく知られていますが、このような関数呼び出し時の引数を知りたい場合はmonitor(function)という関数を使うことで同様の効果を得ることが出来ます。 この場合は monitor(sum)とした後に、関
[Chrome] JSON ViewerでJSONを見やすくしよう！ | DevelopersIO
API開発や利用を行うとき、ブラウザでJSONを取得することがあります。 APIドキュメントによってはJSON構造と型のみが書かれている場合もあり、「実際にどんな値が入っているの？」を確認したい場合などです。 しかし、次のように文字列が単純表示されているとかなり見にくいです。 これは気象情報を取得するOpenWeatherMapのAPIを叩いた際のレスポンスです。 分かりやすく見ようと思うと、何らかのJSON FormatterでPretty表示することが多いです。 この作業（JS0Nコピー＆JSON Fomatterに貼り付け＆Pretty表示）が地味に手間です。そこでChrome拡張機能で楽しちゃいましょう！！！ JSON Viewer 下記の拡張機能をインストーするだけです！ JSON Viewer - Chrome ウェブストア JSONが構造化されて表示される 実際に冒頭のJSO
![[Chrome] JSON ViewerでJSONを見やすくしよう！ | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/bedd873f740a5571b2a127355297e65d6e96d163/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F07%2Fgoogle-chrome-eyecatch.jpg)
Webページの特定のテキストにリンクを張れるChrome拡張機能、Googleが公開
米Googleは6月17日（現地時間）、Chrome拡張機能「Link to Text Fragment」をChrome Web Storeで公開した。Webページ上の特定のテキストへのURLを生成できる。 拡張機能をインストールしたら、リンクしたいテキスト部分を選択し、右クリックで表示されるメニューで「Copy link to Selected Text」を選ぶ。 これでURLが生成されるので、後はメールなりメッセンジャーなりにペーストするだけだ。例えば記事の途中などにもリンクできる。リンクをクリックすると、リンク先として選ばれた部分が黄色く表示される。 長い論文で参照したい部分の覚え書きにも使えそうだ。 筆者の環境では、Chromium版Edgeでも使えることが確認できた。 関連記事 「Chrome 83」の安定版公開 タブのグループ化、Cookie設定や安全性チェック、拡張機能管理の
Chromeに実装される新機能『loading属性』について解説、ついにブラウザがネイティブで遅延ロードをサポート
Google ChromeのEngineering ManagerであるAddy Osmani氏による、Chrome 75でリリース予定のloading属性についての解説を紹介します。 loading属性とはブラウザがネイティブで遅延ロードをサポートするもので、img要素やiframe要素を簡単に遅延ロードさせることができます。以前は、lazyload属性として開発されていましたが、loading属性という名前に変わる、とのことです。 Native image lazy-loading for the web! by Addy Osmani 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Chrome 75でリリース予定のloading属性 ブラウザがネイティブで遅延ロードをサポート loading属性とは loading属性の
Chrome 75 に HTML 側の指定のみで動作する画像遅延読み込み （loading="lazy"） が実装される
Chrome 75 に HTML 側の指定のみで動作する画像遅延読み込み （loading="lazy"） が実装される img 要素や iframe 要素などのリソースを、HTML 側の指定のみで遅延読み込みに対応させる loading 属性を、Chrome 75 が先行実装しましたので簡単に紹介。 本記事執筆時点において、loading 属性は Chrome の先行実装でしたが、その後、HTML Living Standard 仕様において定義されました。それに伴い指定可能な属性値などが変わっていますのでご注意ください。詳しくは「Firefox 75、HTML の指定のみで動作する画像遅延読み込み （loading="lazy"） に正式対応」をご覧ください。 画像など、Web ページで使用するリソースの遅延読み込みは、Web ページの体感的な表示速度を向上させるために利用されますが、
MacでProgressive Web Apps（PWA）を実現、Chrome 73安定版がリリース。主要プラットフォームすべてでPWAの実行環境が整う
MacでProgressive Web Apps（PWA）を実現、Chrome 73安定版がリリース。主要プラットフォームすべてでPWAの実行環境が整う GoogleはChrome 73安定版をリリースしました。Chrome 73ではmacOSでのWeb App Manifest対応などによるProgressive Web Apps（PWA）対応とダークモード対応、Signed HTTP Exchangesへの対応などの新機能が追加されています。 PWAの実行環境があらゆるところに行き渡った PWAとは、HTML、CSS、JavaScriptなどのWeb技術によって開発されるWebアプリケーションの一種です。Webサーバから配信されて実行されるだけでなく、リソースをローカルに保存しオフラインでの実行にも対応。Service Workerによるバックグラウンド処理やプッシュ通知なども可能。デ
「SQLite」データベースに脆弱性--「Chromium」ベースのブラウザにも影響 - ZDNet Japan
印刷する メールで送る テキスト HTML 電子書籍 PDF ダウンロード テキスト 電子書籍 PDF クリップした記事をMyページから読むことができます 広く普及している「SQLite」データベースエンジンにセキュリティ上の脆弱性が発見された。この脆弱性により、膨大な数のデスクトップアプリやモバイルアプリがリスクにさらされているという。 TencentのBladeセキュリティチームによって発見されたこの脆弱性が悪用された場合、被害者のコンピュータ上において悪意のあるコードの実行が可能になるとともに、それほど深刻ではないケースでもプログラムメモリのリークやプログラムのクラッシュが引き起こされる可能性がある。 SQLiteは膨大な数のアプリに組み込まれているため、この脆弱性はIoTデバイスからデスクトップソフトウェア、ウェブブラウザ、「Android」アプリ、「iOS」アプリに至るまでの広範
Chromeの新機能がすごい便利！imgやiframeにlazyload属性を加えるだけでLazyLoad対応に
「Blink LazyLoad」と呼ばれるChromeの新機能は、表示領域外の画像やiframe要素のロードを遅延させることで、Webページのパフォーマンスを大幅に向上させます。 LazyLoadは今まではJavaScriptを使用していましたが、ブラウザのネイティブな機能として、imgやiframe要素にlazyload属性を加えるだけで簡単に利用できます。 「Blink LazyLoad」の機能と使い方、注意点を紹介します。 A Native Lazy Load for the Web 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 「Blink LazyLoad」の機能 セキュアなLazyLoadのポリシー 後方互換性 LazyLoadの有効化 参考資料 終わりに 「Blink LazyLoad」の機能 重要度の低いコンテ
Cacooの新UIを裏で支えるHeadless Chromeによる自動保存機能の実装 | 株式会社ヌーラボ(Nulab inc.)
こんにちは、Cacooチームの平山です。僕は対外的には技術のことをお話しする機会は最近はあまり無いのですが、今回はCacooのUIリニューアルに伴い追加された、内部的には「自動保存」と呼ばれる機能の技術的な仕組みについてお話しします。 皆さん（きっと）ご存知の通り、Cacooは2018年6月28日に全面的なユーザーインターフェースの刷新を行いました。これに伴い、以前は図の閲覧用と編集用に分かれていたページを、編集機能を持つ一つのエディタで担うという変更を実施しました。Google Docsをはじめとする、オンラインのドキュメントツールと同等のユーザー体験に倣うような変更とも言えます。 新しいユーザーインターフェースのエディター さて、以前からCacooを利用されている方はおそらくご存知かと思いますが、ダッシュボード（図の一覧表示）のサムネイルや、ブログ等に張り付けるための画像などは、図の編
HTTPを使うWebサイトはすべて「安全ではない」――Google Chromeで明示へ
2018年7月にリリース予定の「Chrome 68」からは、HTTPを使っている全てのWebサイトについて、アドレスバーに「非安全」（not secure）の文字を表示する。 WebのHTTPS化を推進している米Googleは、2018年7月にリリース予定のWebブラウザ安定版「Chrome 68」から、まだHTTPを使っている全てのWebサイトについて、アドレスバーに「非安全」（not secure）の文字を表示すると発表した。 Googleは、通信の内容が暗号化されるHTTPS接続を推進する立場から、検索順位の決定にも影響を与えるなどの措置を通じ、HTTPからHTTPSへの切り替えを強く促してきた。 現在のChromeでは、HTTP接続を使っているWebサイトはアドレスバーのURLの左側に「i」のアイコンが表示され、クリックすると「このサイトへの接続は保護されていません」という警告が表
Webブラウザの操作をJavaScriptで自動化。Headless Chromeのフレームワーク「Puppeteer」がバージョン1.0に到達。ChromeのDevToolsチームが開発
UIを持たずスクリプトから操作可能なWebブラウザのHeadless Chromeを利用するためのフレームワーク「Puppeteer」がバージョン1.0に到達した。Webアプリケーションの自動テストなどに利用可能だ。 GoogleのWebブラウザ「Chrome」は、ユーザーインターフェイスを持たずコマンドラインやリモートデバッグ機能を通じてWebブラウザを操作できる「Headless Chrome」機能を備えています。この機能は2017年6月にリリースされた「Chrome 59」から実現されたものです。 Headless Chromeを利用すると人間がWebブラウザをマウスやキーボードで操作することなく、プログラムでHeadless Chromeを起動し、特定のWebページを読み込み、画面キャプチャの取得や、指定された場所をクリックし、値を入力し結果を取得する、といった操作を自動的に行わせ
Headless Chrome でブラウザテスト自動化入門 | Wedding Park CREATORS Blog
こんにちは。サーバーサイドエンジニアの@akane_256です。 今日は、Headless Chromeを使ったブラウザテストの自動化（入門）について書きたいと思います。 目次 Headless Chromeとは？ 興味を持った背景 今回やったこと 実際のソースコード まとめ Headless Chromeとは？ Chrome59（2017/6月頃）から搭載された機能 ChromeをGUIなしでコマンドラインから実行できる DOMのノードを取得したり、画面キャプチャを撮ったりできる ツールと組み合わせて自動テストに使ったりする ブラウザを開いて、特定のページを開き、自分で目視確認しなくても、 あらかじめ作ったプログラムをコマンドから実行をすれば 自動でキャプチャをとったり指定の要素を取得したりすることができます。 興味を持った背景 私は普段 Ringraph という結婚指輪・婚約指輪の口コ
JenkinsにHeadless Chromeを入れて定期的にスクショをSlackに投げデザイン崩れがないかチェックする - Qiita
Headless Chrome（ヘッドレス Chrome)がついに、Chrome 59に搭載されました。 GUIのないLinux環境でも簡単にChromeが実行できるようになりました。 これでリリース後にデザイン崩れをチェックしたり、毎日のサイトチェックなんかにも利用できます。 試しに、Yahoo! JAPANのトップのニュース確認という体で毎時にスクショを撮ってみます。 Google ChromeをUbuntuにインストール 今回はUbuntuの環境だったのでapt-getを使います。 apt-getでChromeをインストールできるようにする $ echo "deb http://dl.google.com/linux/chrome/deb/ stable main" | sudo tee -a /etc/apt/sources.list deb http://dl.google.co
Headless Chrome、イメージキャプチャAPIなどの新機能を搭載した「Chrome 59」正式版がリリース
Webブラウザ「Google Chrome」の最新版「Google Chrome 59」正式版がリリースされました。Chrome 59では、Headless Chrome、macOSネイティブな通知、イメージキャプチャAPIなどの新機能が搭載されています。 もっとも注目される新機能が「Headless Chrome」でしょう。Webブラウザは通常、Webページのレンダリング結果を画面上に表示しますが、Headless Chromeはその画面表示を含むすべてのUIが一切表示されず、コマンドラインやリモートデバッグ機能を通じてChromeを操作できるようになります。 Headless Chrome機能を利用することで、コマンドラインなどの操作だけでレンダリング結果のスクリーンショット画像を取得することやPDF出力、DOMの出力などがプログラムから可能になり、テストの自動化などを効率的に行えるよ
Chrome 59で新しいJavaScriptインタプリタ「Ignition」とコンパイラ「Turbofan」が有効に。より省メモリかつ高速。「Crankshaft」は引退へ
Chrome 59で新しいJavaScriptインタプリタ「Ignition」とコンパイラ「Turbofan」が有効に。より省メモリかつ高速。「Crankshaft」は引退へ 現在ベータ版として開発が進んでいるChrome 59に搭載されるV8 JavaScriptエンジン「V8 Release 5.9」では、新しいJavaScriptインタプリタ「Iginition」とコンパイラ「Turbofan」がデフォルトで有効になると、V8 JavaScript Engineのブログで説明されています。 V8 5.9 is going to be the first version with Ignition+Turbofan enabled by default. In general, this switch should lead to lower memory consumption an
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ついにGoogle ChromeからFlashが完全削除。FTP機能も消滅
Chromeブラウザのグループタブ機能、バージョン83で正式リリース
「Chrome」からWindows/Mac/Linuxへリモート接続！ Googleが公式提供する無償ツール【レビュー】 - 窓の杜
Google Chrome DevToolsのアップデート
