ytkwsmのブックマーク / 2013年9月5日

ytkwsm id:ytkwsm

2013年9月5日のブックマーク (2件)

[Chrome] DevToolsのWorkspaceでローカルプロジェクトをライブエディット&デバッグする - Qiita
※ 執筆時点ではCanaryで利用できます ChromeのDevToolsに「Workspace」という機能が追加されました Workspaceを使うとDevToolsをエディタとして使うことができますローカルフォルダの追加 DevToolsを開いて歯車アイコンからSettingsを開くと項目に"Workspace"があるので選択 Add folderでフォルダを選択リソースへのアクセス許可を求められるので許可を選択 Sourcesパネルに選択したフォルダが追加されるリソースの編集の自動反映を有効にするブラウザのリロードなしに編集・保存したファイルが反映されるようになる(htmlはむり？右クリックメニューから"Map to network resource"を選択ダイアログでDevToolsの再起動を求められるので許可(Chromeの再起動ではない) 右側のエディタ部分でCSS
ytkwsm 2013/09/05
local

develop

Chrome
リンク
ChromeのDevToolsで画像をbase64エンコードしちゃう方法 - Qiita
画像を文字列にしてリクエストを減らしたりするアレことbase64。普段はコマンドラインのツールとかで変換してるんですがChromeのDevToolsでかなり手軽にできたのでメモ。 htmlで画像を読み込むブラウザで開く DevToolsを開いてリロード ResourcesパネルのImagesに画像があるのを確認右側に表示されてる画像を新しいタブで開くようにドラッグ ↓ ヽ(｀▽´)/ アドレスコピーして使える。 DevTools側の画像はbase64変換して表示してるのかーという豆知識もさりげなくゲット。 ※ サイズがある程度を超えるとアドレスバーに表示できなくなるので注意いちいちタブで開くのめんどくさい人向け (サイズの問題も回避できる) 左下のボタンを押してDevToolsのウィンドウを切り離す (※長押しして選択しないと切り離せない場合もある) DevToolsにフォーカスし
ytkwsm 2013/09/05
base64

image

Chrome
リンク
- 2013年9月8日
- 2013年9月5日
- 2013年9月3日