2017/10/18更新 Chrome 62がリリースされましたが。徐々に適応されていくようです。 The field trial allows us to turn on the feature over time. It will be at 100% soon.— Eric Lawrence (@ericlaw) 2017年10月18日 Chrome 52(今年1月リリース)において、パスワードの入力フォームがあるとアドレスバーに警告が出るようになったのはニュースサイトでも多くとりあえげられたのでご存じの方も多いと思います。 www.itmedia.co.jp 上記内容のGoogleからのアナウンスにおいて、Chrome62(今年10月リリース予定)で対応を強めることもアナウンスされています。 security.googleblog.com Chrome62より、http://のペー
新しい職場、新しいパソコン。まず始めに入れるツールの一つがスクリーンショットではないでしょうか。 でも、Chromeのver.59からは、標準機能として装備されたようなのです。 やりかた ChromeのDevelopers Toolを立ち上げる。 Macだと、Chromeを開き「alt + command + i」を同時に押す。 レスポンシブ表示にする 続いて、command + shift + m を押します。または、下記のボタンを押してください。 画面上部に、解像度やデバイスを変更するセレクトボックスが表示されます。 デバイスの選択肢を増やす 必要最低限はありますが、PCのスクリーンショットも取れるようにしたいので、Editを押します。 デベロッパーツールの表示が切り替わるので、「Laptop with HiDPI Screen」と「Laptop with MDPI Screen」をチ
Chromeのデベロッパーツールは、Web制作に欠かせないといっても過言ではありません。DOMインスペクター、スタイルパネル、JavaScriptコンソールなど基本的な機能だけでも便利ですが、さらに便利になる機能も数多くあります。 デベロッパーツールを使って、Webページやアプリの制作・デバッグのワークフローが大きく改善される実用的で便利な機能とテクニックを紹介します。 Mastering Chrome Developer Tools: Next Level Front-End Development Techniques 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ダークテーマ 02. 要素をすばやく選択できる選択モード 03. グローバル変数として格納 04. アニメーション用のツール 05. 要素の疑似状態をシ
Speee エンジニア組織推進室の服部 (yhatt) です。 みなさん E2E テストされていますでしょうか。弊社の Ruby on Rails プロダクトにおいては、RSpec、Capybara、 Poltergeist を組み合わせ、 feature spec で E2E テストを行う構成が一般的でした。 そんな中、Chrome 59 に ヘッドレスモード (--headless) が搭載 されたことで、テストや CI 環境において、最新の Chrome 環境による E2E テストを実施できるようになりました。それに合わせて、PhantomJS のコアメンテナーがメンテナーを降りる ことを発表し、PhantomJS のアップデートや、継続的サポートは期待できない状況となっています。 ヘッドレス Chrome ことはじめ | Web | Google Developers [A
よく訓練されたアップル信者、都元です。大変ご無沙汰しておりますが、相変わらず生魚が好きです。 さて最近は、GitHub上でもろもろとソフトウェア開発をしていることが多いのですが、gitで管理するmdファイルはもちろん、issueやPR内でもMarkdown記法を使って様々な記述できるのはご存知の通りかと思います。 PlantUML さて、仕様のディスカッションやドキュメントの記述をしていると、ちょっとしたシーケンス図やクラス図、状態遷移図、UMLという図の記法を使ってコミュニケーションを取りたい場面が出てきます。 以前、当ブログでも「Atom と PlantUML で快適シーケンス図駆動開発ライフ」というエントリーにて、テキストの文法でUMLを記述して画像生成、それをGitHubに貼り付ける、というテクニックをご紹介しました。 PlantUMLは非常に強力な仕組みです。Atomによる編集も
こんにちは @wozozo です花金です。 Android の Google Chrome 53 以降、デスクトップ版の Chrome 60 以降では Payment Request API に対応しています。これに対応しているブラウザであれば、毎回クレジットカード情報の入力をすることなく Google Chrome に保存されているカード情報を使って簡単に決済を行うことが可能です。 まず前提として、Payment Request API が提供する機能は決済に必要なカード情報の受け渡しであり、カード情報を受け取ったにあとに実際に決済を行うためには PAY.JP のような決済ゲートウェイを別途利用する必要があります。 ECサイトによって必要な機能の違いはあると思いますが、クライアント側の実装は基本的に以下のコードだけで済みます。 (Google Developers のサイトにサンプルコー
概要 Google Chromeを使って、document.write()で外部のJavaScriptを読み込んでいるページを開くと、いつの間にか開発者ツールのコンソールに以下のようなメッセージが出る状態になっていた "A Parser-blocking, cross-origin script, スクリプトのURL, is invoked via document.write. This may be blocked by the browser if the device has poor network connectivity." 開発者ツールを開きながら適当なサイトを見ていると、広告っぽいURLが引っかかってることが多い この警告が何を意味しているかというと、遅い携帯電話の通信だとページの読み込みが遅くなるので、以下のようにdocument.write()でクロスオリジンのスクリ
Google Chrome is now shipping with a download button for videos that are just embedded videos (i.e. not MSE): I'm having a hard time find any documentation for Chrome's implementation of the <video> tag. Does anyone know if there is a way - short of disabling "controls" and creating your own video player controls - of disabling this feature? I realize that if this is showing, it's already easy to
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を設定する 表示項目
.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
Many sites and apps have a lot of scripts to execute. Your JavaScript often needs to be run as soon as possible, but at the same time you don’t want it to get in the user’s way. If you send analytics data when the user is scrolling the page, or you append elements to the DOM while they happen to be tapping on the button, your web app can become unresponsive, resulting in a poor user experience. Th
Keep Tabs Thank you to everyone who has shared invaluable feedback on the new version of Session Buddy! We are actively releasing updates to address your critiques and incorporate your suggestions. Explore our recent releases and see what's coming up: https://sessionbuddy.com/releases/ Session Buddy is a tab manager that allows you to: ● Save open tabs as collections that can be easily restored la
Chrome の最新バージョン (ver.48.0.2564.103) で、特定のサイトのページ読み込みが愕然とするほど重くなる現象が発生した。重くなるどころかほぼブラウザがフリーズしたかのごとく、通常であれば体感的に5秒も待てば読み込みが完了するようなページが、同期・非同期の読み込みに関わらず猛烈に遅くなり読み込み完了に2〜3分近く待たされる。ちなみに Windows 版にはなく Mac 版にのみ発生する症状。 問題のページを Developer Tools を起動した状態でロードし、ネットワーク ペインを確認したところ画像・JavaScript・Web Font など数多くのファイルの読み込みで “ pending ” 状態が長く続いてしまう。ブラウザとサーバー間のリクエスト処理に何らかの問題が発生しているらしい。 [sc-figure src="http://flat.press/w
以前の記事で、 Webアプリケーションのデバッグの仕組み について触れました。今回は実践的なJavaScriptのデバッグについて掘り下げていきたいと思います。 ブラウザデベロッパツール 私の個人的なお気に入りはChromeデベロッパツールです。SafariやFirefoxはChromeほどの高水準に達していません。しかし、徐々に改善されてきています。FirefoxにはFirebugと改良されたFirefoxデベロッパツールが組み合わされた機能が備わっています。もし、Firefoxチームがビルトインされているデベロッパツールの改良の中で素晴らしい仕事をし続けたとしたら、Firebugはいつか、すたれるかもしれません。 個人的な好みにかかわらず、ターゲットとするあらゆるブラウザで、全てのコードのテストやデバッグができるようにすべきです。”あらゆるブラウザ”には、かの有名なInternet E
LINEは7月29日、PC用ブラウザのChrome向けにLINEアプリをリリースしました。対応OSは、Chrome OSとWindows（RTを除く）、Mac OS X、Linux。これまでクライアントがリリースされていなかったChrome OSやLinuxでもLINEを利用できるようになりました。 LINE - Chrome ウェブストア LINEのPC版は、既にPC向けクライアント（Win/Mac）として提供されています。しかし、従来のPC版は、インストールや起動に少し手間がかかっていたのが、ちょっとしたデメリットでした。 一方で、Chromeアプリ版の場合、ChromeウェブストアからLINEアプリをインストールするだけで簡単に利用を開始できるほか、使用頻度の高いブラウザから直接LINEを起動できるため、Chromeユーザーにとっては利便性が高まるとみてよいでしょう。 LINEのCh
Adds React debugging tools to the Chrome Developer Tools. Created from revision c7c68ef842 on 10/15/2024. React Developer Tools is a Chrome DevTools extension for the open-source React JavaScript library. It allows you to inspect the React component hierarchies in the Chrome Developer Tools. You will get two new tabs in your Chrome DevTools: "Components ⚛" and "Profiler ⚛". The Components tab show
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く