You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
転職ナビのフロントエンドを担当しています、@sueshinです。 Livesense - 関 Advent Calendar 2017、22件目をお送りします。 どうぞ宜しくお願いします。 はじめに フロントエンドでよく注目されるJavaScriptではなく、 地味で渋いまるで関節技のような、Google Chrome Devtoolsを使った技術をtipsの形式でまとめました。 免責事項 ショートカットなどは全てMacのキーボード操作にしています。Windowsユーザーは適宜読みかえてください。 Chromeのバージョンは63系に基づいて紹介しています。 52の関節技!! Elements 1.hover時のコンポーネントのCSSルールを表示 使い方 ①DOM要素を選択 ②Stylesペインを開く ③:hovをクリック ④hoverフィルタを適用 2.対応するCSSファイルを開く 使い方
一般的なスクレイピング手法とその問題点 スクレイピングというと、HTTPクライアントライブラリを用いてHTML取得し、HTML/XMLパーサーで解析するというのが一般的だと思います。 この手法の場合、以下の場合にうまく処理できません。 ターゲットのページがJavaScriptにより動的にDOMを操作する場合 HTML/XMLパーサーが取得したHTMLを正しく解釈できない場合(正しくないHTMLでもブラウザはなんとか処理するが、パーサーライブラリは正確なHTMLでないと処理できないことがある) 特に問題になるのは前者でしょう。最近のWebサイトではJavaScriptでDOMを操作することは珍しくなくなってきています。SPAであればなおさら難しく、もはやこういった手法によるスクレイピングは不可能でしょう。 ヘッドレスブラウザによるスクレイピング 動的なDOMやパーサーがうまく解釈できないとい
Chromeのデベロッパーツールは、Web制作に欠かせないといっても過言ではありません。DOMインスペクター、スタイルパネル、JavaScriptコンソールなど基本的な機能だけでも便利ですが、さらに便利になる機能も数多くあります。 デベロッパーツールを使って、Webページやアプリの制作・デバッグのワークフローが大きく改善される実用的で便利な機能とテクニックを紹介します。 Mastering Chrome Developer Tools: Next Level Front-End Development Techniques 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ダークテーマ 02. 要素をすばやく選択できる選択モード 03. グローバル変数として格納 04. アニメーション用のツール 05. 要素の疑似状態をシ
TL;DR Headless Chrome is shipping in Chrome 59. It's a way to run the Chrome browser in a headless environment. Essentially, running Chrome without chrome! It brings all modern web platform features provided by Chromium and the Blink rendering engine to the command line. Why is that useful? A headless browser is a great tool for automated testing and server environments where you don't need a visi
Today's topic is attacks against browser's XSS filter. XSS filter is a security function built in browsers. It aims to reduce the actual exploitation risk when web applications are vulnerable to XSS. The filter is regarded as a “best-effort second line of defense”. This means the filter is not expected to block 100% of attacks in the first place. The “first line” here is conventional security meas
.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
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
Chromeのchrome://flags/に「既定のrefererヘッダーの情報量を減らす(reduced-referrer-granularity)」フラグがある。 その動作を確認したので簡単にまとめる reduced-referrer-granularity このフラグを有効にした場合、現在のオリジンと別のオリジンへのリクエストをする際、付加されるrefererヘッダはオリジンの情報だけになる。 例えば、http://localhost/hoge/fuga.html?test=1#hash から http://yahoo.comへのリンクをクリックすると flagがない場合 refererはヘッダは「http://localhost/hoge/fuga.html?test=1」となる flagがある場合 refererヘッダは「http://localhost/」となる 同一オリジン
Lenovoのコンシューマ向けPCにプリインストールされたSuperfishと呼ばれるアプリケーションが、システムに独自のルート証明書をインストールしSSL MITM(Man-in-the-Middle)を行っていたことが発覚し、話題になっている(Lenovoによるプレスリリース)。 この件に関して、「Certificate pinningでは防げない」といった内容が書かれた記事がある。 この記事の中で参照されているChromiumのSecurity FAQでは、デバッグ用プロクシやファイアウォールなどのセキュリティ機器によるSSL MITMを許すため、「private trust anchor」の場合はpinningが無効になると書かれている。 Security FAQ - The Chromium Projects # How does key pinning interact wit
スマートフォンで利用しているAndroidアプリのうち、PCでも使いたいものもあるだろう。Androidを開発するGoogleのWebブラウザ「Google Chrome」を使えば、かなりのアプリをPC上で動かせる。MakeTechEasierが「How to Run Android Apps in the Google Chrome Browser)」で、その方法を紹介しているので、以下そのポイントを見てみよう。 この方法、Mac OS XまたはWindowsでGoogle Chromeを利用するPC向けだ。また、すべてのAndroidアプリ/ゲームが利用できるわけではない点にも注意されたい。「Androidアプリがうまく動かなくてもPCに害を与えることはない」とのことなので、やってみる価値はありそうだ。以下で紹介する方法はGoogle Chromeの拡張機能「ARChon」を用いるが、
The following is deprecated and left for historical purposes. Please see the editor's draft of the spec for the most up to date design: https://w3c.github.io/webappsec-suborigins/ Objective Our objective is to provide a new mechanism for allowing sites to easily separate their content into separate, flexible synthetic origins while serving content from a single physical origin. Furthermore, the sy
Chrome Native Client Tutorial ダウンロード編 Written on Oct 18, 2014. Posted in Chrome Native Client もし、Webアプリケーションの開発の中で「どーしてもJavaScriptではきつい箇所」に直面した時、Chromeであれば「Native Client」を使って開発するという手があります。Googleより公開されているSDKを使ってCやC++でモジュールを作成し、JavaScriptとそのモジュール間で通信することが可能です。従来からあるアーキテクチャごとにモジュールの実行形式を作って提供するNaClと、LLVMの中間形式の形でモジュールを作って提供するPNaClがあります。どちらも、同じSDKで開発が可能です。 Googleから公開されているSDKのインストール方法について、和訳を行ってみました。もしN
July 3, 2014 If you travel, you've probably found yourself stuck with zero network connectivity on more than one occasion. This sucks, especially if you just want to look up a few previously viewed pages to get some work done. Who are we kidding?...you want to look at kittens shooting lasers out of their eyeballs. Unfortunately, in Chrome attempting to request something from the network while offl
便利 fand/console-tube · GitHub 何これ 普通にインターネットしてると一日数回、Chromeのデバッグコンソールでyoutube動画見たくなる事がある。 デバッグ中、「あっYoutube観なきゃm,見る必要がある」ってなる。 おもむろにタイプ 観れた! 音も出る! 使い方 README.md参照。 どうなってrの console.tube(url) すると、現在ページに隠しvideo, canvasを追加 予め立てたexpressサーバにurl渡して、動画をストリームで返す。 canvasにvideo描画 定期的に console.log("%c", "background: url(" + canvas.toDataURL() + ")"); する 小話 console.imageっていう便利ライブラリあって、真似したかった。 最初、Youtubeから直接動画読
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く