Qiitaの質問に答えまくって気付いた初心者に足りないバグ解決スキル - Qiita
ここのところちょっと時間に余裕があり、暇を見つけてはQiitaの質問に答えるという取り組みをやっています。以前StackOverflowでも同様の取り組みをちょっとだけしてたことがあります。 9日間で35個の質問に回答してみて、正直に思うのは「質問の質が悪すぎるなー」ということです。ただ、どう質が悪いのか上手く言語化できず悶々としていました。 そんな折、今朝googleのおススメ記事に飛び込んできたQuaraのこちらの回答を読んで、「これこれ！こういうことよ！」という気持ちになったため、これから質問する人に向けてこの内容を少し嚙み砕いてまとめてみます。 ベテランはどうデバッグをしてるのか （自分をベテランと言っていいのかはさておき）日頃からコードを書いていると、デバッグには、その時使っている言語やフレームワークによらず、ある程度の行動パターンがあることに気付いてきます。 デバッグには難しい
Scratch3.0を使ってAtCoderで競技プログラミングを楽しむ - Qiita
小中学生がビジュアルプログラミング言語として習うことが多いScratch(スクラッチ) を使って、AtCoderを使った競技プログラミングができるChrome拡張 Scratcher's AtCoder がScratch3.0に対応したので、早速使い方を解説してみたいと思います。 競技プログラミングとは、プログラミングを使ったパズルを解くスポーツです。Scratchを使ってチャレンジできるのでこれで多くの人が競技プログラミングにチャレンジできるようになるのではないかと思います。 AtCoder (アットコーダー) は競技プログラミングが楽しめる日本のWebサービスです。なおchokudaiさんという有名なプログラマがAtCoderの社長さんです。ほとんどの問題が日本語で用意されているので、とても日本人には親しみやすいです。また、毎週のようにコンテストが行われている他、過去のコンテストの問題
手軽にGoogle Apps ScriptのコードをGithubで管理する | Recruit Jobs TECHBLOG
結果として、どれも要件を100%満たすことはできませんでした。 node-google-apps-scriptまわりはGoogleも推奨しているのですが、一度IDE上で修正すると、Git管理から外れることになってしまいます。 全てソースコードをローカルで開発・管理すれば良いけれども、WebIDEの便利さはやはり捨てがたいところ…。 そこで以前開発したLambdaのGitHub同期用のChrome拡張に、GASプロジェクトにあるソースコードを持って来れば、同期周りはすぐできるのではと思い、その方針でChrome拡張の開発を始めました。 そして、できたものはこちらになります： Chrome拡張： Google Apps Script Github アシスタント ソースコード: GitHub 執筆時点ではリリースから１ヶ月ほど経っていまして、特に宣伝してはいないものの、ユーザが着実に増えています
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 使い方 インストール
ChromeのデベロッパーツールでJSをデバッグする方法（2018年版） - ICS MEDIA
JavaScriptのデバッグは必ず覚えておきたいウェブ開発の必須スキルの1つです。プログラムの実行をデバッグすることで現在の変数の値や、処理がどのように進んでいるのかを確認します。これを利用してプログラムが意図した動作になっているかの分析に役立てることができます。 本記事ではGoogle Chromeブラウザーの「Chrome Developer Tools」(以下「デベロッパーツール」)を使用してJavaScriptをデバッグする際の基本的な使い方を解説します。「今までデベロッパーツールを使ったことのない」という方でもこの記事を読めば理解できるよう、チュートリアル形式になっています。20分ほどで理解できるようまとめているので、1つ一つ順番に試しながら読み進めてください。 この記事で学べること ・デベロッパーツールの使い方 ・JavaScriptのブレークポイントの使い方 ・実行中の変数
Chromeの開発者ツールを使って特定のDOM要素だけスクリーンショットする方法 - Qiita
特定のDOM要素のみスクショする機能がChromeにあるってことをさっき知りました。 大変便利だったので書き留めます。 元ネタ: Chrome DevTools: Capture the screenshot of a specific element /dev tips 特定DOM要素をスクショする方法 例えばQiitaのあるコードブロックだけ撮影したいとします。 Command + Shift + i で開発者ツールを起動して自力で選択 または 右クリック → 検証 として開発者ツールのElementsタグを開き、DOMが選択されている状態にします。 この状態で Command + Shift + p を押すと文字入力欄が開くので、 node screenshotと打ち込むと、打ってる途中で Mobile Capture node screenshot という選択肢が絞りこめます。 ク
HTMLやCSS修正の確認はChromeの標準機能「デベロッパーツール」を使うと便利！ - ラブグアバ
Chromeの「デベロッパーツール」とは？Chromeのデベロッパーツールをご存じない方もいるかもしれないので簡単に説明しますと、単語から想像できるとおり「開発者向けのデバッグツール」です。同じような機能を有しているものとしては、Firefoxのプラグイン「Firebug」なんかが有名ですね。 開発者向けというくらいなので、非常に多くの便利な機能（JavaScriptのデバッグとかネットワーク通信のやりとりだとか）を備えています。 ただ、高機能ゆえに使いこなすのは結構大変です。私も全然使いこなせていません。 今回ご説明するのはほんのさわりの部分だけですが、それだけでも便利ですよ！ Chromeのデベロッパーツールを使ってCSSを仮修正する方法では実際にデベロッパーツールを使って、CSSを仮修正してみましょう。 ここで注意なのが、あくまで「仮」という点です。これをやったからってCSSが修正さ
Chrome DevToolsを使いこなそう！ Web開発に必須なブラウザ開発ツールによるデバッグの基本 - エンジニアHub｜若手Webエンジニアのキャリアを考える！
Chrome DevToolsを使いこなそう！ Web開発に必須なブラウザ開発ツールによるデバッグの基本 開発者ツール（DevTools）とは、ブラウザに搭載されているデバッグツールです。多岐にわたる技術の集合体であるWebページやWebアプリケーション、いわゆるフロントエンドの開発において、なくてはならないツールです。 皆さん、どうもこんにちは。今回で3度目のエンジニアHubの登場となる大竹智也です。春の季節もそろそろ終わりを迎え、新生活を迎えた人たちも新たな環境に慣れてくる時期だと思いますが、元気にお過しでしょうか。 前回までエディタの話ばかりしてきましたが、今回はエディタから離れてWebブラウザ（以下、ブラウザ）の話をしたいと思います。ただ、ブラウザの話といっても、エンジニアHubは開発者向けの媒体なので、ブラウザに搭載されている開発者ツール（Developer Tools）のお話を
Chromeデベロッパーツール（検証モード）の基本的な使い方を解説
Google Chromeのデベロッパーツール（別名：検証モード）は、Web開発者にとって非常に便利なツールです。 特に便利なのが、スマートフォン向けの開発を行っている時の表示エミュレーション機能で、PC画面にも関わらず擬似的にスマホ画面にして表示してくれます。 Google Chromeデベロッパーツールを知っておくことで、HTML/CSSの編集やデバッグ、スマートフォンでの表示チェックが容易にできるようになります。 今回は、Google Chromeデベロッパーツールの基本的な機能と使い方をまとめました。 Chromeデベロッパーツールの使い方 1.起動方法 デベロッパーツールは、Google Chromeブラウザを使っている方であれば、誰でも無料で利用することができます。 利用方法は、調べたいページを右クリックし、「検証」の項目がありますので、それをクリックします。 ショートカットキ
知っておくとかなり便利！Chromeのデベロッパーツールであまり知られていない実用的な機能とテクニックのまとめ
Chromeのデベロッパーツールは、Web制作に欠かせないといっても過言ではありません。DOMインスペクター、スタイルパネル、JavaScriptコンソールなど基本的な機能だけでも便利ですが、さらに便利になる機能も数多くあります。 デベロッパーツールを使って、Webページやアプリの制作・デバッグのワークフローが大きく改善される実用的で便利な機能とテクニックを紹介します。 Mastering Chrome Developer Tools: Next Level Front-End Development Techniques 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ダークテーマ 02. 要素をすばやく選択できる選択モード 03. グローバル変数として格納 04. アニメーション用のツール 05. 要素の疑似状態をシ
Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能
Webアプリのデバッグやチューニングに役立つ、Chrome Developer Toolsの主要機能を、スクリーンキャプチャ中心で簡潔に紹介。2014年10月に最新情報に改訂。 モダンブラウザーの中でGoogle Chromeは最後発ながら、その機能の潤沢さ、便利さ、高速さからシェアを大きく伸ばしている。そして、今やほとんどのブラウザーではWindowsの場合F12キーを押すことで（Macの場合はCommand＋Option＋Iキーで）手軽に各ブラウザー搭載のデベロッパーツールを利用できるが、特にChromeのデベロッパーツールは、非常に機能が豊富なため、利用している人もかなり多い。 本稿では筆者がよく使う機能や、使うと便利な機能を中心に、Chromeのデベロッパーツールについて紹介していく。なお、本書は執筆時点で、最新のChrome 38を使用している。 機能ふかん 残念ながら、Chro
Google Colaboratoryを使えばブラウザ上でPythonの実行環境が簡単に手に入る - タダケンのEnjoy Tech
こんにちは! タダケン(@tadaken3)です。 Googleが機械学習の教育や研究用に提供しているGoogle Colaboratoryを試してみました。ColaboratoryはJupyter notebookを基盤としたオープンソースプロジェクトです。Chromeのデスクトップ版で動作します。 Colaboratoryを使えば、Chromeブラウザ上で無料でPythonの実行環境を手に入れる ことができます。今回は、Colaboratoryの使い方を解説します。 バリバリのデータ分析者にも、Pythonでプログラミングを学んでみたいと思っている初学者にもおすすめのツールです。 そもそもJupyter notebookとは Google Colaboratoryを起動する Google ColaboratoryでPythonのコードを実行する 作成したnotebookを保存する まと
利用しているTrelloのChrome拡張機能（備忘録&事例あり） - Qiita
１．概要 現在、個人のタスク管理にTrelloを利用しています。 チームメンバーから、Chromeの拡張機能を利用して、Trelloをカスタマイズが出来ることを教えてもらったので、いろいろと導入しました。ググるとすぐ出てくる情報ですが、自分がどのように利用しているかの事例も併せて紹介したいと思います。 ２．Colored Hashtag for Trello URL：Colored Hashtag for Trello 内容：タイトルのハッシュタグに合わせてカードの背景を変更してくれます。 事例：固定カード（出勤時間、目標ポモドーロ数など）を表現したり、不定期タスクとの仕切りに使っています。 補足：作成された方は日本人でした。べにやまぶろぐ ３．Card Color Titles for Trello URL：Card Color Titles for Trello 内容：ラベルに文字列を
「Chrome OS」でのLinux仮想マシン稼働に向けたコンテナが近く実現か
印刷する メールで送る テキスト HTML 電子書籍 PDF ダウンロード テキスト 電子書籍 PDF クリップした記事をMyページから読むことができます 「Chromebook」ユーザーは間もなく、お気に入りのLinuxディストリビューションやLinuxアプリを、Googleの「Chrome OS」搭載ハードウェア上で簡単に実行できるようになるかもしれない。 Chrome Unboxedが報じているように、「New device policy to allow Linux VMs on Chrome OS」（Chrome OS上でのLinux仮想マシン（VM）の稼働を許可する新たなデバイスポリシー）と題された新たなマージコミットがChromium Gerritに追加されている。 関連エントリに目を通すと、4月24日頃に安定版のリリースが予定されているChrome OSのバージョン66での
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
tkr on Twitter: "Chromeの翻訳拡張めっちゃ便利じゃん 巨大なページ全体翻訳重いし、検索バグるし、数式まで翻訳されたりしてきついけどこれなら原文と比較できる https://t.co/0pFC1ElciJ"
Mozy Okubo | CTO on Twitter: "GitHubでソースコードを追う時に便利なツール Source Graph https://t.co/NyEXGE3E3H Chrome拡張機能を入れると動画のように、GitHub上にボタンが出てきて 定義ジャンプとか、使われて… https://t.co/wT3PoYxQG0"
Web Development Tutorial: Understanding how to use the Browser Developer Tools | Codementor
html css デバッグ chrome 拡張 - Google 検索
GitHub - kevinfish/nacl-gforth: a port of gforth to Google Chrome's Native Client mode
Release timeline | Chrome Platform Status