【Google Chrome】「特別なURL」でトラシューや開発、管理に便利な機能を呼び出す（一覧あり）【Google Chrome】「特別なURL」でトラシューや開発、管理に便利な機能を呼び出す（一覧あり）：Google Chrome完全ガイド Google Chromeのアドレスバーに「chrome://about」のような特別な表記のURLを入力すると、Google Chromeの詳細な設定画面を表示させたり、トラブルシューティングに便利な機能を呼び出せたりできます。Web系の開発者や管理・運用担当者向けに、そのURL表記の一覧を紹介します。
Google ChromeでUserAgentを変更する - Qiita
この記事について Google Chromeに備わった機能を使ってUserAgentを偽装する方法を2種類紹介します。 特定のOSだったら○○する、特定の機種だったら☓☓するといった処理の動作確認に便利です。 ※Google Chrome 55（2016/12/18現在最新版）で確認した内容になります。 その１：デバイスエミュレータ機能を使う 概要 デバイスエミュレータ機能を使うと、UserAgentの偽装はもちろん、ページの表示領域の再現等もできます。 動作確認の内容が「iPhoneで見た時〜」「Androidで見た時〜」ぐらいの粒度ならこちらの方法で事足ります。 手順 １. Developer Toolsを開く Windowsなら「F12」、Macなら「Control + Option + I」でDeveloper Toolsを開きます。 開くとこんな感じの画面が出現します。 ２. d
CentOS7上でSeleniumからGoogle Chromeのヘッドレスモードを利用する - Qiita
Google Chrome 59より実装されたヘッドレスモード(--headless)を利用したSeleniumの環境をCentOS7上に構築する。 環境 CentOS 7.3 yum install epel-releaseをしておく。 Google Chrome 60以上 ChromeDriver 2.29 ChromeDriverのインストール EPELに登録されているバージョンが2.27なので、Downloads - Chrome Driver - WebDriver for Chromeよりダウンロードして展開する。 展開先はPATHが通っているとやりやすい。 wget https://chromedriver.storage.googleapis.com/2.29/chromedriver_linux64.zip unzip chromedriver_linux64.zip s
SeleniumからHeadless Chromeを使ってみた - Qiita
2018年5月6日: Headless ChromeがStableになった後の現状に合わせた新しい記事を書きました。こちらもご参照ください。 先日PhantomJSのVitalyさんがメンテナーを引退するという話が話題になっていました。ヘッドレスなブラウザーを気軽に使う手段としてPhantomJSにはお世話になりました。今後はHeadless Chromeを使って欲しいとのことなので、試してみました。 Node.jsを使うサンプルは多く見つかりますが、諸事情でPythonを使いたかったので、ここではSelenium経由でHeadless Chromeを使います。 Headless Chromeとは Google Chrome 59から使えるようになる予定の、画面を表示せずに動作するモードです。自動テストやWebスクレイピングなどに役立ちます。 2017年4月28日現在、Mac版とLinux
Google Chrome Ver56でSSL証明書情報を確認する方法 | ブログ | WEBLIC LLC
最近何かと話題のSSL（https）ですが、Google Chromeをアップデートしたところ、SSLの証明書情報を確認する場所が変更になったみたい。 少し前までのバージョンだと、アドレスバーの「保護された通信」部分をクリックすると、証明書情報を確認することが出来た気がするが、今のバージョン56だと、その項目がない… こちらはChrome56の「保護された通信」をクリックした画面 調べてみると手順が変わっていました。 １．画面上で右クリック→「検証」 ２．そうするとディベロッパーツールが表示されるので、その中にある「Security」をクリック ３．「View certificate」をクリック このように証明書情報を確認することができました。 普通に「保護された通信」をクリックで「証明書情報」のリンクをつけられないのだろうか！？
ChromeのヘッドレスモードをMacOSXで試してみた - Qiita
マストドンで盛り上がる最中、 こっそり一部で盛り上がってたChromeのヘッドレスモード MacOSXで少し試してみたいと思います。 開発中の機能ということで、仕様の変更もあると思いますが、2017/4/16段階ではちゃんと以下のやり方で動作してます:) 準備 Google Chrome Canaryをインストール 開発段階にある機能がのってるchromeです。ささっと入れちゃいます。 nodejsインストール(v6.3以上) ちなみに今回試したのはv7.9.0 シェルにCanaryバイナリへのエイリアスを作成します(僕は.zshrcに追加しました/bashの人は.bash_profileかな) alias chrome-c='/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary'
MP4Tools - ブラウザ上で動画変換
MP4Tools MP4形式の動画をブラウザ上で変換します。（開発中なのでバグや不具合等もあるかもしれません） 特徴すべての処理はお使いのブラウザ上で完結し、ネットワークを利用しません。 ファイルのアップロードやダウンロードを行わないため、プライベートな動画でも安全に利用できます。著作権法にも抵触しないので安心です。 すべての変換は画質音質の劣化なく、 素早く行われます。このため余計なCPUパワーを必要としません。 もちろんスマートフォンでも動作します。 MPEG-DASH形式のファイルにも対応しており、60fpsや4Kも含めた様々なMP4動画を扱うことができます。 動作環境開発中につき、対応するブラウザは下記に限られます Internet Explorer ( ファイルサイズ上限: 600MB ) Google Chrome ( ファイルサイズ上限: 4GB , 省メモリ動作 ) Fir
JavascriptのChromeでのデバッグ方法個人的まとめ2016 - Qiita
はじめに Javascript開発でよく使ってるデバッグ方法についての個人的なまとめです。 当たり前の事ばかりですが、これからJavascript開発をやる方や興味がある方に少しでもお役に立てればと思います。 デバッグの鉄板 console.log Javascriptの開発でconsole.logを使わない人を探すほうが難しいくらいだと思います。
Chrome デベロッパーツールの使い方: プロのように華麗に使いこなすための20のテクニック
Chromeのデベロッパーツールをプロのように使いこなすための20のテクニックを紹介します。 いやー、本当にデベロッパーツールは機能が豊富ですね。 How to use Chrome DevTools like a Pro 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 HTMLの要素をクイック編集 指定した行番号に移動 すべての子ノードを展開 デベロッパーツールの位置を変える CSSのセレクタによるDOM検索 Material Designとカスタムカラーパレット 複数のカーソル 画像をData URIとしてコピー 疑似クラスのトリガー 複数のコラムをドラッグで選択 「$0」で現在の要素を手に入れる 要素の表示 「Event Listeners」の表示 イージングのプレビュー Media Queriesの検証 ネットワークをフィルム
Chrome Devtools for beginners (v1.1)
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜Masakazu Muraoka
HTML5アプリ開発基盤「Meteor」がすごい
サーバもクライアントもJavaScriptで記述できる「Meteor」が注目を集めている。サーバ上のコードが変更されると、クライアントも自動的に変更されるという Wikipedia MobileのiOS版がHTML5に 今年は、HTML5を使用したネイティブアプリ開発（ハイブリッドアプリと呼ばれます）が盛り上がりつつありますが、強力な事例が登場しました。WikipediaのiOSアプリがApache Cordova（PhoneGapのオープンソース版）を使って書き直され、Android版と同じソースコードを使用するようになったそうです（詳細：New Wikipedia app for iOS（and an update for our Android App））。 Opera 12ベータ版リリース Operaの次期メジャーリリースが近づいて来ました（リリース）。 一番大きな変化は、Oper
Chrome DevToolsを使ってJavaScriptのメモリリークを検出し、解消する - 人生dat落ち
JavaScriptを書いていたらブラウザがくっそ重くなる症状に出くわした。あぁ、噂のメモリリークですわ。 先人の知恵に頼るマン。それっぽい記事が見つかる。 javascriptのメモリリーク対策(随時更新) - Qiita Shibu’s Diary: JavaScriptのメモリリークを10倍速で発見する Taming The Unicorn: Easing JavaScript Memory Profiling In Chrome DevTools Writing Fast, Memory-Efficient JavaScript - Smashing Magazine angularjs - How to catch memory leaks in an Angular application? - Stack Overflow 上の記事はProfiles + Take Heap
Windows8.1でエクスプローラやデスクトップ表示が急に遅くなったときの対処法 | Lancork
※当ブログではアフィリエイト広告を利用しています。 Windows8.1を使い出して約一ヶ月が経過しますが、Windowsログイン時のデスクトップ表示やエクスプローラでのフォルダの中身表示に異常に時間がかかるようになりました。 なんとかもとの快適な状態に戻すことができたので、解決方法をメモします。 発生した障害 以下のような現象が急に2日ほど連続して発生しました。 エクスプローラでフォルダを開くと数分間固まることがある Windowsログイン時、デスクトップアイコンの表示に数分かかる Google Chromeの起動に数分かかることがある(起動してもすぐに反応しない) Google Chromeで新しいタブを開くと表示が固まることがある 上記の通りデスクトップ表示やエクスプローラだけでなく、その他のアプリケーションも動作が遅くなったものがありました。 さらにイベントビューアーでWindow
XMLHttpRequest()
目次 概要 XMLHttpRequest() ActiveXObject(ProgID : String [, location : String]) キャッシュ制御 クロスドメイン制限 XMLHttpRequest Level 2 サンプルコード 参考URL 概要 JavaScriptの非同期通信に利用される XMLHttpRequest() の解説まとめ。Ajax と呼ばれることもあります。 XMLHttpRequest() // --- XMLHttpRequest if (!'XMLHttpRequest' in this) { this.XMLHttpRequest = (function () { var i, l; for (i = 0, l = arguments.length; i < l; i++) { try { return arguments[i]; } catc
さよなら手作業・人海戦術！ HTML5時代のツール「Selenium2」でWebシステムのテストを自動化
本シリーズは、WebブラウザをUIとして利用した業務システムやアプリケーション（以下、Webシステム、Webアプリケーション）のテストをテーマとして、Webブラウザを使ったテストを自動化するOSSのツール「Selenium2」を紹介します。業務システム開発の現場で適用してきたノウハウを元に、これまでSelenium2について知らなかった人から以前使った経験がある人まで、より実践的な「使える」内容を盛り込んでいきたいと思います。 本シリーズのスコープと対象読者 本シリーズはWebシステム・Webアプリケーションのテストの中でも「Webブラウザを操作して実施するテスト」をスコープにしています。開発工程としては、1モジュールとして単体テストに位置付けられる場合もあれば、複数のモジュールやシステムと連携して結合テストや総合テストに位置付けられる場合もあるでしょう。これらのテストのことを、本シリーズ
意外と知らない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
Google Chromeでスマホサイト制作
Google Chromeでスマホサイト制作 @ichigamiさんからTwitterで「Chrome の開発者ツール、下でなくて右に表示させることができるの知らんかったー」とコメントを貰ったので、普段わたしがどんな感じでスマホサイト制作をしているかご紹介します。 追記：最新バージョンでの利用方法は以下のエントリーに記述しました。 Google Chrome 37でスマホのエミュレーションを行う 基本的には開発者ツールは右に表示。これは開発者ツールの左下のアイコンを長押しで設定できます。 他にも右下の歯車の設定から、「Device metrics」にチェックを入れ「Screen resolution」を320×480に設定して表示領域をスマートフォンと同じくらいになるように設定して、「Emulate touch events」にチェックを入れタッチイベントをエミュレートしています。案件によ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chromeでjavascriptデバッグ！まず半歩♪
Maruta
「Google Chrome」のUAを偽装してモバイル端末での見栄えをチェック「MobileLayouter」NOT SUPPORTED