Chrome DevToolsにもGeminiを搭載へ。エラーの解決策などAIが支援
Googleは、日本時間5月15日から開催中のイベント「Google I/O 2024」で、デスクトップ版のChromeが備える開発ツール「Chrome DevTools」に、同社の最新版の生成AIであるGeminiを組み込むと発表しました。 これによりDevToolsのコンソールで表示されるエラーメッセージなどをGeminiが解説し、エラーの解決などを支援してくれるようになります。 DevToolsのエラーをGeminiが解決 下記がGoogle I/Oのデベロッパー向け基調講演で行われたデモ画面の一部です。DevToolsに表示されたエラーに関して、右上の「Understand this error」ボタンをクリックすると、このエラーがGeminiに送られます。
ページ内のテキストを読めなくするChrome拡張を作った - 詩と創作・思索のひろば
世はまさにハイパーメディア時代。何をするにも視覚的なキャッチがないとやっていけない時代です。ブラウザのスクリーンショットを撮ることも多いでしょう。しかしプライベートな内容もそこに映り込んでしまうこともありがち。かといって画像をいちいち加工するのも面倒……というわけで、DOM操作によってテキストを隠す拡張を作りました。 GitHub - motemen/webextension-obfuscate-texts 2022-07-20 追記: Chrome Web Store に出ました Obfuscate texts - Chrome ウェブストア Manifest V3 で作ったせいでほかのブラウザは未対応。 スクリーンキャスト Chrome extension: Obfuscate texts - YouTube ページ内の要素を選択し、「Obfuscate」することで▗▝▌▏▇
デベロッパツールの新機能が便利！ そのCSSがなぜ機能しないのか、どう修正すればよいのかが分かる
デベロッパーツールの地味だけど便利な新機能が実装されるので、紹介します。CSSの非アクティブなプロパティを表示し、それがなぜ機能しないのか、どう修正すればよいのか教えてくれる機能です。 たとえば、親がdisplay: flex;ではないのにFlexboxのプロパティを設定しまった場合は、下記のように表示されます。 CSSに携わる人なら、この機能をオンにしておいて損はないでしょう。 display: flex;ではないのにFlexboxのプロパティを設定 ほかにも、widthを設定したのに効かないときは、それインライン要素ですよ、と教えてくれます。 インライン要素にwidthを設定 デベロッパーツールのこの新機能は「Find inactive styles」と呼ばれるもので、要素に適用されている非アクティブなスタイルを見つけることができます。 Find inactive styles -Ca
ウェブアクセシビリティ検証ツール「axe」を用いた自動テスト実行スクリプト | Accessible & Usable
公開日 : 2021年2月23日 (2022年7月1日 更新) カテゴリー : アクセシビリティ Deque Systems, Inc. が開発、公開している、「axe」というウェブアクセシビリティ検証ツールがあります。Chrome、Firefox、Edge の拡張機能がリリースされており、各ブラウザの開発者ツールで使用することができます。 ウェブアクセシビリティ検証ツール「axe」(Chrome 拡張機能) の表示例 axe はとても便利なツールですが、ブラウザの拡張機能として使用する場合、1ページずつ開いてアクセシビリティを検証する、という形になります。検証対象サイトのページ数が多い場合、面倒に感じることもあるかもしれません。 axe では、コアエンジン「axe-core」もオープンソースで公開されているので、これを応用することで、ブラウザ自動操作ツールを介してウェブサイト (複数のウ
TabFS
Going through the files inside a tab's folder. For example, the url.txt, text.txt, and title.txt files tell me those live properties of this tab (Read more up-to-date documentation for all of TabFS's files here.) This gives you a ton of power, because now you can apply all the existing tools on your computer that already know how to deal with files -- terminal commands, scripting languages, point-
2019年のWebGLデバッグツール状況 - Qiita
これはThree.js Advent Calendar 2019の14日目の記事です。 3年前に以下の記事を読んでWebGL Inspectorを使い、デバッグ処理でWebGL Inspectorに凄くお世話になりました。 WebGLの開発やデバッグに便利なブラウザ拡張機能をつかってみよう 「Three.jsにBaylon.jsみたいなDebug modeある？」という議論を見つけて気になったので、現状のWebGLデバッグツール状況を調べてみました。 Three.jsフォーラム - Does three.js has some “scene debug mode” or plugin? (like babylon.js DebugLayer) 消失したデバッグツール WebGL Inspector 最終更新日（github）：2017/02/22 去年はまだChromeウェブストアにあった
Chrome Dev Summit 2018に参加しました！ - 一休.com Developers Blog
この記事は一休.comアドベントカレンダー2018の1日目です。 こんにちは。レストラン事業本部の西村です。 11月12、13日にサンフランシスコで開催されたChrome Dev Summit 2018に参加しました。 今年はChromeが10周年ということで、この10年で変わったこと、これからについての話で始まりました。 2日に渡って行われた22のセッションの中で、特に注目した点について深掘りしていきます。 1日目のセッション 1日目は現在提供している技術について、具体的な事例を交えながら紹介されました。 VisBug VisBugは、hoveringとKeyboard shortcutsでブラウザ上でサイトの画像を差し替えたり、一部のコンテンツの内容やスタイルを変更できるChrome extensionです。 ブラウザ上でちょっとしたスタイル修正や画像の入れ替えをしてデザイン決め、とい
Googleの新ツールが便利すぎる！デザイナーやディレクター向けの新しいデザインツール -ProjectVisBug | コリス
VisBugはChromeの機能拡張で、ブラウザに表示したページのデザインやコンテンツを検証・編集できます。グリッドの確認はもちろん、要素を移動させたり、入れ替えたり、別の画像にしたり、テキストを編集したり、カラーを変更したりなど、さまざまなアイデアを実行・テストすることができます。 制作や検証時だけでなく、クライアントとの打ち合わせ、社内ミーティングなど、活躍するシーンがたくさんある便利ツールです。 VisBug -GitHub VisBugの特徴 VisBugのインストール VisBugの機能 VisBugの特徴 VisBugはChromeの機能拡張で、デベロッパーツールのデザイナーやディレクター向けという感じです。開発者のAdam Argyle氏は、Googleの現役UXエンジニア。 機能拡張なので、使うのは簡単です。 Chromeで当ブログを表示し、VisBugを起動してみました。
Chrome拡張の高速な英語辞書ツールをつくりました(Mouse Dictionary) - Qiita
経緯 もともとMouseoverDictionaryという素晴らしいFirefox用辞書があったのですが、Quantumの登場とXULの廃止とともに使えなくなってしまったため、自分用にChrome拡張をつくった次第です。 ソースコード 実装に関わる技術寄りの用語: React, esbuild, chrome.storage.local, chrome.storage.sync, Cross-extension messaging, Hogan, debounce, resizable/draggable, intl.v8BreakIterator, deinja, クロスブラウザ, など。 ※詳細は「Mouse Dictionaryの技術的な話」をご参照ください https://qiita.com/wtetsu/items/2a5568cb0b5a38c003fb 使い方 インストール
PhantomJSの開発が終了しリポジトリがアーカイブ化された
QtWebKitをベースにしたヘッドレスブラウザであるPhantomJSの開発が終了され、2018年6月2日にリポジトリもアーカイブされました。 ariya/phantomjs: Scriptable Headless Browser 以前にもお伝えしていましたが、PhantomJSはQtWebKitをベースにしていて安定版が利用しているバージョンも古いままでした。 また、QtWebKitの新しいバージョンへアップデートを行うベータ版も開発されていましたが、Headless Chromiumが公開されたことや個人でPhantomJSのメンテナンスを続けていくの難しいという問題もあり開発は停止していました。 2017-05-03のJS: Headless Chrome/FirefoxとPhantomJS/SlimerJS、ES modules - JSer.info 2017-09-05のJ
Seleniumでスクリプトを書くのに使える記録ツールあれこれ | MagicPod Tech Blog | MagicPod: AIテスト自動化プラットフォーム
Seleniumの記録・再生ツールといえばSelenium IDEやSelenium Builderが有名ですが、これらのツールはFirefox55以降動作しなくなっていました※1。そこでSeleniumプロジェクトチームによって新バージョンの開発が進められ、先日ついに、Chromeで動作する新しいSelenium IDEのバージョン1.0がリリースされました。 今日は、この新しいSelenium IDEをはじめとする、無料で使える様々なSeleniumスクリプトの記録ツールについてご紹介します。 なおこの記事では、プログラマー向けに、「プログラミング言語によるスクリプト作成の補助ツール」という観点から各種ツールを比較します。プログラミング言語でスクリプトを書く場合も、スクリプト記録ツールは下記のような用途に活用でき、非常に便利です。 ブラウザ上の要素のロケータ※2 を簡単に取得する テス
Apps Script による高度な開発プロセス
.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
CSSアニメーションを作るときはChromeデベロッパーツールのAnimationsが便利 - Qiita
CSSアニメーションは直感的じゃないから作りづらい CSSでアニメーションを作るとき@keyframesを使います。オブジェクトを拡大縮小するアニメーションなどは次のようなスタイルで指定します。 @keyframes scale-anime { 0% { transform: scale(1); } 33% { transform: scale(2); } 66% { transform: scale(0.75); } 100% { transform: scale(1); } } .el { animation: scale-anime 1s linear; } Web開発者にはお馴染みのChromeデベロッパーツール。デベロッパーツールの機能の中に「Animations」があり、CSSアニメーションのテンポや尺(時間)を調整できます。 まずは、作成したアニメーションをChromeで表示
Qiita:Team と比較して esa.io の方が圧倒的に優れてる機能3点 (\\( ⁰⊖⁰)/) - kakakakakku blog
プロダクトで CQO を担当していて，Qiita:Team をこよなく愛す僕ですが，食わず嫌いは良くないなということで，esa.io をトライアルで使ってみた． 実際にポストしてみたり，ヘルプを見てみて，基本的なところは Qiita:Team と似てるなーという印象を受けたんだけど，Qiita:Team と比較して esa.io の方が圧倒的に優れてるなと思う機能を3点を知ってしまったので，熱量高くまとめてみた．まぁ圧倒的は言い過ぎたかもwww 1. カテゴリーという概念があること esa.io のポストは，タグ以外にカテゴリーというメタ情報を付けることができて，これは便利． Qiita:Team だとタグしかないので，例えば日報のように時系列に沿った情報を探したりすることができず，結構ポストが埋没する傾向にあるという課題はどこのプロダクトでもあるんじゃないかなと思う． ちなみに Qiit
文書校正ツール textlint の Chrome 拡張を作った - もなでぃっく
以前、プラグインで拡張可能な文章校正ツール textlint で小説の作法を検証するための規則を作ったのですが、textlint はコマンドラインツールであるために利用するまでのハードルが高い状況でした。 Sublime Text や Atom などのプログラマ向けエディタを利用していれば、textlint のプラグインが使えたりするのですが、今回はより簡単に利用できるように Chrome の拡張機能として textlint をブラウザ上で使えるようにしてみました。 インストールはこちら: 【Chrome ウェブストア】 textlint: 文章チェッカー インストールすると、ページ内の編集領域で文章入力中にリアルタイムで校正してくれるようになります。（もちろん ON/OFF できます） textlint に最近追加された自動修正機能にも対応しているので、ボタン一発で自動で修正されたりしま
WebRTCで良く使うツールとか - Qiita
WebRTCに関しては Chrome, Firefox のブラウザによるデバッグツールが多機能なので， IPレベルのパケットを覗かない限りは大抵で済んでいます． Chrome Chromeでサポートしているツールの一覧は以下に載っています． 最新のChrome v39では使えないものもありますが，大体どんなツールか知るには役立ちます． Google Chromeの詳細情報を見る方法 HTTPヘッダー、通信状態など開発者向け情報 自分の環境で使えるツールはChromeで以下のコマンドを打つと出てきます． chrome://webrtc-internals/ Peerセッションのイベントや，シグナリングの経過，送受信中の統計データが確認できる． 対向のPeerとやりとりしている映像サイズ，FPSとかビットレートも見れる． スマートフォンはこの画面を見ていると，対向から送られてくる受信側のデータ
Chrome開発者ツールの小技集 | POSTD
最近、普段以上にChromeの開発者ツールを使うことに時間をかける機会がありました。その過程で、自分が今まで気づいていなかった機能をいくつか見つけました（少なくとも今までその機能を探す必要に迫られていなかった、とも言えるのですが。例えばブラックボックス化や非同期のスタックトレースなど）。そのため、開発者ツールでとても気に入っているいくつかの機能についてまとめてみたくなったのです。 小さな虫眼鏡ののアイコンは、特定の要素やCSSプロパティに対して、「どのCSSファイルに書かれているどのセレクタ/クラスが最終的なスタイルを決めているか」を示してくれます。例えば、どれかDOM要素に対して「要素を検証」を選び、右側の「Computed」というタブを選びます。確認したいCSSプロパティを見つけてその虫眼鏡アイコンをクリックすることで、すぐさま右側に正しいCSSファイル内のクラス/セレクタを表示してく
React Developer Tools - Chrome Web Store
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
あとから線の編集が可能なお絵描きツールの描画高速化 : document
7月24 あとから線の編集が可能なお絵描きツールの描画高速化 はじめに 2010 年くらいからのんびり開発している趣味のお絵かきツール Diceros の実装について、ドキュメントを残しておいたほうがよさそうなのでこの文章を書きます。 まだ未完成ですが、お絵描きツールは以下の URL で開発バージョンを触ることができます。IE10+, Google Chrome 17+ あたりで動作すると思います。Wacom のペンタブレットプラグイン(MouseEvent)、Android Chrome(TouchEvent)、IE10(PointerEvents) あたりの筆圧に対応してます。 http://draw-imaya.sqale.jp/diceros/ しばらく触るとわかると思うのですが、このお絵描きツールは(VectorLayer/SVGLayerでは)一度書いた線をあとから調整すること
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - plibither8/markdown-new-tab: 🗒️ ⏰ ✅ Save notes in Markdown directly in the 'New Tab' page
