開発体験を変える! Chrome DevTools Tips 7選 - Qiita
最近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 を入力することで取得で
HSTS (HTTP Strict Transport Security) の導入 - Qiita
HTTPで接続した際に、強制的にHTTPSへリダイレクトし、以降のそのドメインへの接続はすべてHTTPSとする機能がHSTS (HTTP Strict Transport Security) である。RFC6797で標準化されている。 これはHTTPヘッダに以下を含むことで実現される。 Strict-Transport-Security:max-age=有効期間秒数;includeSubDomains max-ageではHTTPSで通信する期間を設定する。また、includeSubDomainsを指定することで、サブドメインにもHSTSが適用されるように設定できる。 HSTSのサポートは、2015年6月9日にマイクロソフトがIEへのサポートを追加したことで、すべてのメジャーブラウザにおいてサポートが完了し、HTTPサーバーとしてもApacheを始めとし設定が可能だ。 Apacheの設定 A
終わってしまうChromeアプリ
既に2ヶ月前の2016年9月8日、Google Developers Japan Blogに、僕にとって非常に興味深いブログが掲載されました。 Chrome アプリからウェブアプリへ 簡単にまとめると、「Chromeアプリは（ChromeOSを除いて）終了します」という内容でした。薄々感じ取ってはいたものの、改めて正式に言われてしまうと、とてもショックです。まあ、でも、確かに仕方のないことなんですけど、特に日本においてはChromebookを目にする機会はほとんどありませんし、そのためChromeアプリ開発者の数も非常に少なかったと思います。OpenSocialといい、Chromeアプリといい、そろそろ僕も「お前が注目した技術は数年後になくなる」とか声が聞こえてきそうですが、2年近く、かなり本気を出して取り組んできたChromeアプリの世界だけに、立ち直れるまでかなりの時間がかかったという
カスタムの Chrome アプリと拡張機能を作成して公開する - Chrome Enterprise and Education ヘルプ
この記事は、Chrome Enterprise の管理者と、ユーザー向けの Chrome アプリや拡張機能をパッケージングまたは公開した経験があるデベロッパーを対象としています。 ユーザーのニーズに合ったアプリや拡張機能が Chrome ウェブストアで見つからないことがあります。その場合は、カスタムのアプリや拡張機能を作成し、ユーザーが各自の Chrome OS や Chrome ブラウザに追加できるようにすることができます。たとえば、管理者は自社の人事システムにリンクするカスタムのブックマーク アプリをユーザーの Chrome デバイスに自動でインストールすることができます。 始める前に アプリや拡張機能がそのマニフェストでターゲットとしてウェブサイトにリンクしている場合は、Google Search Console を使用して組織がそのウェブサイトを所有していることを確認します。 非公
Chromeのヘッドレスブラウザがやってくる。というわけで試してみた。 - Qiita
注意：この記事は古いです。2016年06月06日に書いた記事です。 2017/04/14 追記： Chrome59から正式にヘッドレスモードが搭載されます。 ヘッドレスモードではPhantomJSなどのようにJavaScriptでヘッドレスブラウザを制御することも可能です。 https://chromium.googlesource.com/chromium/src/+/master/headless/ 2017/06/07 追記： NightmareJS風に操作できるライブラリをリリースしています。 ヘッドレスChromeをもっとも簡単に操作できると思われるNightmareJS風ライブラリ http://qiita.com/devneko/items/3689b46fc2bcdb8121a8 先日、Googleの人が「Headless Chrome is coming so soon」
Webデザインが圧倒的に捗るGoogle Chromeの拡張機能12選
みなさんはChromeの拡張機能を活用していますか？ 拡張機能を使えば面倒な作業でも効率良くこなすことができます。今回はWebデザインのときに使うと仕事が圧倒的に捗るChromeの拡張機能を紹介します。 1. FireShot ダウンロードURL：FireShot ページのキャプチャを撮影できる拡張機能です。ページ全体をキャプチャ、目に見える部分をキャプチャ、選択してキャプチャすることができます。ランディングページなど縦長のページのスクリーンショットを撮影するときに便利です。 2. PerfectPixel by WellDoneCode ダウンロードURL：PerfectPixel by WellDoneCode ページ内に任意の画像を重ねることができる拡張機能です。画像を動かしたり、透過させたり、サイズを変更したりしてレイアウトすることができます。ボタンやロゴの配置を迷っているときにコ
Google Chrome Extensionを作ってみた-その7- | DevelopersIO
はじめに 今回はコンテキストメニューについてです。 コンテキストメニューを出すためのcreateメソッドの引数createPropertiesの内容を中心にして紹介します。 使ってみる manifest.json コンテキストメニューを使うには、manifest.jsonの"permissions"に"contextMenus"を追加します。 コンテキストメニューに対する処理はbackground.html内に記述します。アイコンは128を指定していますが、16x16が推奨サイズです。 { "name" : "ContextmenuSample", "version" : "1.0.0", "background_page" : "background.html", "permissions" : [ "contextMenus", "http://*/*", "https://*/*"
MacのChromeで誤ってCommand+Qしたときに警告メッセージを表示させる方法*二十歳街道まっしぐら
【ゆっくり実況】スプラ3に向けてスプラ歴二ヶ月の私がチャージャー使ってみた結果…。【スプラトゥーン2】
ホームページ制作なら渋谷のウェブ制作会社【スタイル】
【スタイル】は東京都渋谷区でホームページ制作を行うウェブ制作会社です。ウェブサイト制作、SEO対策、ウェブマーケティングなどを承っています。良質テンプレートでの格安ホームページ制作プランもあります。
Chromeのデベトッパーツールのズームが効かない時の初期化方 | ダーフク.com
MacのChromeDeveloperツールで起こる不具合 ズームで拡大された画面がDeveloperツールだけ 縮小されない現象が起こりました。 その初期化法をご紹介します。 修復するためにはコツが要ります。 まず、マウスから手を離します。 キーボードで Command + Option+i を押してDeveloperツール画面を閉じます。 下の画像ですが【Optionキー】が抜けてました！ もう一度 Command + Option+i を押してDeveloperツール画面を表示させます。 その後、キーボードで Command + 0(数字のゼロ) を押すと Developerツール画面が初期化され 元に戻ります。 なかなかもとに戻す方法が見つからなかったので 早めにバグを修正していただきたいものです(^_^;)
AmazonのURLを自動的に短縮してくれるやつ - ✘╹◡╹✘
https://chrome.google.com/webstore/detail/amazon-url-modifier/ajhdkbkpmpojmimfcdhhepjoobmknkck 背景 前に「AmazonのURLを開くと自動的に短縮版のURLにリダイレクトしてあわよくばアファリエイトを付けてくれるChrome拡張が欲しい」 と書いていたのを思い出したので、つくりかたを調べてChrome拡張をつくった。ブックマークレットを押せば動くとかではなくて、勝手に効果を発揮してほしいよね。 これは何 amazon-url-modifierという名前のChrome拡張で、Amazonの商品ページのURLを短縮するためのもの。ここからボタンをクリックすればインストールできる。インストールされている状態で amazon.co.jp の商品ページにアクセスすると自動的に発動する。また設定ページでアフ
Chrome Extensionが作れた！ - gawaooooo.blog
はじまり 仕事ではJavaScriptを殆ど書かなくなってしまったけど、毎日のはてブ巡回ではJavaScriptの情報を追っていた。 そこでたまたま tacamy さんのスライド はじめてのJavaScript / JS Girls Tokyo #1 // Speaker Deck を見て、Chrome Extensionすげー！って思った。JS Girlsというのもあるのね。 仕事中もずーっとChrome Extensionの事を考えていて、もしかしたら今の業務で面倒だと思っている作業が簡単に出来るかもしれない、と閃いた。 作業短縮、ミスも減る！！ メリットしかない！という事で作り方の勉強から。 勉強方法 まずはドットインストールで概要を勉強。他の人との共有の仕方まで理解出来た。 右クリックのTwitter検索便利。 Google Chrome拡張機能入門 (全20回) - プログラミン
なんかChrome上部に変な検索バーが突然出てきたので削除してみた - Film Goes With Net ネット館
なんでしょうね、これは。突然なんの前触れもなくChrome上部に出現しましたが。 なんか検索バーみたいだけど、新しい拡張機能など入れた覚えもないのに突然現れた。すごく邪魔。そして気持ち悪い。 右側にセッティングのアイコンがあるのでそれをクリックするとこんなポップアップが出てくるけど、Disableにチェックを入れても再リロードすればまた出てくる。About Usをクリックすると、http://www.additionalchoice.info/serv/tf/about.htmlといページに飛んで、たった一文「site is under construction」とかかれたページに飛ぶ。 あまりググっても対策も出てこない感じですが、ここのフォーラムで拡張機能を全部切れと書いてあったのでやってみる。 What is this "To Find" thing? – Google Groups
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React Developer Tools
Service Workerとその周辺API 駆け足紹介
CardCounter for Trello - Chrome Web Store
Postman | API Development Environment
Support for theme-color in Chrome 39 for Android | Blog | Chrome for Developers
ブラウザのアドレスバーと検索ボックスにカーソルが移動するショートカット | ライフハッカー・ジャパン
GitHub - jasonlong/isometric-contributions: Browser extension for rendering an isometric pixel art version of your GitHub contribution graph.
