Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 転職ナビのフロントエンドを担当しています、@sueshinです。 Livesense - 関 Advent Calendar 2017、22件目をお送りします。 どうぞ宜しくお願いします。 はじめに フロントエンドでよく注目されるJavaScriptではなく、 地味で渋いまるで関節技のような、Google Chrome Devtoolsを使った技術をtipsの形式でまとめました。 免責事項 ショートカットなどは全てMacのキーボード操作にしています。Windowsユーザーは適宜読みかえてください。 Chromeのバージョンは63系に基づ
Project Naptha highlight, copy, and translate text from any image. Project Naptha automatically applies state-of-the-art computer vision algorithms on every image you see while browsing the web. The result is a seamless and intuitive experience, where you can highlight as well as copy and paste and even edit and translate the text formerly trapped within an image. Unfortunately, your browser is no
最近、普段以上にChromeの開発者ツールを使うことに時間をかける機会がありました。その過程で、自分が今まで気づいていなかった機能をいくつか見つけました（少なくとも今までその機能を探す必要に迫られていなかった、とも言えるのですが。例えばブラックボックス化や非同期のスタックトレースなど）。そのため、開発者ツールでとても気に入っているいくつかの機能についてまとめてみたくなったのです。 小さな虫眼鏡ののアイコンは、特定の要素やCSSプロパティに対して、「どのCSSファイルに書かれているどのセレクタ/クラスが最終的なスタイルを決めているか」を示してくれます。例えば、どれかDOM要素に対して「要素を検証」を選び、右側の「Computed」というタブを選びます。確認したいCSSプロパティを見つけてその虫眼鏡アイコンをクリックすることで、すぐさま右側に正しいCSSファイル内のクラス/セレクタを表示してく
localhost:* 的なURLをいろんなサイトで使いまわしてるときに前のサイトのfaviconが残ってて邪魔になるのでfaviconだけピンポイントで消したいことがたまにある。 ~/Library/Application\ Support/Google/Chrome/Default/Favicons ってところにSQLiteのDBとしてfaviconのデータが入ってるみたいだったので、SQLで消したいやつをDELETEしたら消えた。 $ sqlite3 ~/Library/Application\ Support/Google/Chrome/Default/Favicons sqlite> delete from favicons where url='http://localhost:8080/favicon.ico'; sqlite> delete from icon_mappin
Chrome 43およびそれ以降のバージョンにおいて、DOMの属性（値）がJavaScriptのプロトタイプチェーンに移行されます。これにより、突っ込んだことをやっていた場合に、今まで動作していたコードが動かないということが発生する可能性がありますので、事前に変更内容を知り、対策をしておくことが求められます。HTML5Rockの更新情報として掲載されていましたので、さっそく日本語訳をしてみました。心当たりがある方は、ぜひ以下の内容を読んでいただいて、コードの修正などに取り込んでいただければと思います。 原文: http://updates.html5rocks.com/2015/04/DOM-attributes-now-on-the-prototype DOM属性は今後プロトタイプチェーンに Chromeチームは、最近「DOM属性をプロトタイプチェーンに移動しています」とアナウンスしてい
GreasemonkeyはFirefoxの拡張機能のひとつで、ブラウザ側に設定されたJavaScriptコード（ユーザースクリプト）でWebページに変更を加えることができる。この機能は、シンメトリック製品・GeneCodeに幾分か似ている面がある。ユーザースクリプト開発とサーバーサイドJavaScript開発は類似の発想なのである。どちらも、ブラウザがHTML文書を表示する前に文書のオリジナルDOMツリーを操作する手段となる。 Tampermonkeyは、Greasemonkeyとほぼ互換のChrome拡張機能である。以下で、実際の説明はChrome上のTampermonkeyに関して行う。 関連記事：JSONにpathでアクセスするには？ 関連記事：Helmaのインストール 関連記事：変数のスコープ 関連記事：Google Apps Script で社内システムを作ってみた（1） 関連記
Adds React debugging tools to the Chrome Developer Tools. Created from revision 44c3d3d665 on 2/7/2025. 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 shows
1. Chrome Developer Tools を 使いこなそう！ 2013/04/02 Google Developers Live Japan #3 このスライドを使ったセッションはこちら → http://bit.ly/YYtStr Toru Yoshikawa (@yoshikawa_̲t) 2. Who? 吉川 徹 / Toru Yoshikawa @yoshikawa_̲t Google Developer Experts (Chrome) html5j/HTML5とか勉強会スタッフ Web先端味⾒見見部 顧問 ⽇日本jQuery Mobileユーザー会 管理理⼈人 Sublime Text 2 Japan Users Group 管理理⼈人 allWebクリエイター塾/jQuery Mobile担当講師 Blog:
General General hints and tips that don't fall in to any category.
Windowsではいまだに使用されているMS ゴシックとMS Pゴシック。メイリオやConsolasといったClearTypeのフォントがリリースされて長らくたっても、いまだに標準フォントとして設定しているWebサイトが少なくありません（IT mediaとか）。 Firefoxの場合は、標準フォントを「メイリオ」に設定しておくとある程度勝手にフォントを置き換えてくれます。 一方、Google ChromeはCSSで具体的にフォント名が指定されている場合は、指定されたフォントを優先して適用するようです。そのため、律儀に「MS Pゴシック」とフォント名を指定してくれているWebサイトでは、残念ながらあのビットマップのフォントが表示されてしまうというわけです。 これらのフォントの使用場面が減るだけで、「Windowsはフォントの表示が汚い」といった誤解も減らせそうなのですが……。というわけで、せ
Google chromeの拡張機能は、ブラウザ標準の機能としてPC間同期できます。しかし、拡張機能の設定だけは同期されず。私は、Chrome Stylistを使って、サイトごとにフォントを指定（id:consbiol:20101108）しているのですが、その設定を各PCで別個にするのは面倒。そこで、dropboxやSugarsync（id:consbiol:20090708）などのとシンボリックリンクを使って拡張機能設定を同期しています。方法は以下の通り。 １．まずはGoogle chromeを終了しておく ２．chromeの拡張機能設定ファイルが入ったフォルダは以下の通り。これをdropboxにカット＆ペースト。もとのフォルダは消しておくこと。 ・XPの場合："C:\Documents and Settings\ユーザー名\Local Settings\Application Data
Chrome Extensions API リファレンス このページは、Google Chrome Extension作成のための勉強過程で作成しました。基本的にはほぼ の意訳になっています。いずれ本体で日本語ページが用意されると思いますが、それまで便利に使ってもらえれば良いなと思います。 また、拡張機能を 自作 している過程で出たポイントを、逆引きコンテンツとして追加したりもしてあります。 全体を通じて、誤り等もあるかと思います。また、黎明期の機能であるため、実装がそもそもドキュメントと異なる点も散見されます。このサイトによって引き起こされるいかなる不都合についても当方は責任を負いかねますが、ご意見や指摘などは、以下のいずれかに頂ければ幸いです。 拡張機能作成のために 公式サイトにもありますが、順番としては、次のような感じがやはり良いのではないかと思います。 はじめてみよう で、まずは動
To use most extension APIs and features, you must declare your extension's intent in the manifest's permissions fields. Extensions can request the following categories of permissions, specified using the respective manifest keys: "permissions" Contains items from a list of known strings. Changes may trigger a warning. "optional_permissions" Granted by the user at runtime, instead of at install tim
みなさんはGoogle Chromeを使っていますか？ 最近は拡張機能も正式リリースされて、どんどん便利になっていきますね。 今回はそんなChromeの便利な使い方を一つご紹介します。 Chromeのアドレスバーは検索窓と兼用になっているんですが、 ある設定を追加すると、 任意の検索エンジンや、検索窓のあるサイトの検索をChromeからできてしまうんです。 たとえば・・・ YouTubeの検索をChromeからダイレクトにおこなう場合は アドレスバーに「youtube」と入力して スペース＋検索キーワードを入力すると、youtube検索というものが出現 そして、検索 このように、Chromeから検索できました。 では、実際にどうやって設定を追加するのかをYouTubeを例に説明しようと思います。 好きな検索エンジンの追加手順 まずはChromeの右上のメニューからオプションを開きます ウィ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
