ＳＱＬの窓
<< ページの右下に、ペ… | TOP | 『Windows 10、バー… >>

2018年01月11日


Google Chrome のエディタ機能を使用してローカルにある HTML と JavaScript のソースでブレークポイントを使用したデバッグを行う手順

 
フォルダとファイルを作成



ファイルの作成や内容の保存も Google Chrome からできます(右クリックで表示されるポップアップメニューにあります)が、まずはエクスプローラでデバッグ実行に必要なファイルを用意します。

この際、フォルダ名はスペースや日本語は使ってはいけません(動作しませんでした/また親フォルダも同様だとは思われますが、そこまで確認はしていません)。そして、ファイル内のキャラクタセットは UTF-8 限定です。

test.html と test.js

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Google Chrome エディタ</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css">

<script src="test.js"></script>

</head>
<body>

<ol>
	<li><a href="https://www.google.co.jp/" target="_blank">Google</a></li>
	<li><a href="https://www.yahoo.co.jp/" target="_blank">Yahoo! JAPAN</a></li>
	<li><a href="https://twitter.com/" target="_blank">Twitter</a></li>
</ol>

</body>
</html>





 
 

 

$(function(){

	$("a").each(function(){
		console.log($(this).prop("href"));
	});

});










フォルダを Chrome に登録する



ドラッグ&ドロップするか、Add folder to workspace で表示されるフォルダ選択ダイアログで選択します。



アクセスを許可する



Chrome の Filesystem タブに登録されます

ファイルを選択してタブを開く



この時点で普通のエディタです。バイナリファイルでも普通にそのまま開くので、ファイルの先頭部分の文字列ででファイルの種類を確認する事もできます。

HTML ファイル以外だとブレークポイントを使用できませんが、JavaScript のテキストがファイル内にあれば、その部分を選択して、CTRL+SHIFT+E(右クリックからのメニューでも実行機能があります/Evaluate in console) でその場で実行できます。

その方法だと、F12 で console で実行のように、現在開いているページの環境下で JavaScript を実行する事ができます。

ただ、ここではブラウザに実際に表示できる HTML 環境を基盤としてブレークポイントを使用しながら実行する手順を提示しています。

エディタで表示している HTML をブラウザで表示する



アドレスをクリップボードにコピーして、アドレスバーに貼り付けて表示すると、ファイルのアイコンの右下に緑色のマークが表示され、同期された事が確認されます



PAUSE アイコンをクリックする



押せる状態になっているのでクリックすると、灰色になります。この状態でページを再表示します。



そうすると、最初のスクリプト位置で停止します(この場合は jQuery の中です)。ここであわてずに、test.js のタブを表示してブレークポイントを設定します。



デバッグを開始する



ここからは、通常通りです。一番重要なのは、ページをロードしてPAUSE アイコンをクリックしてからブレークポイントを設定するという手順です。





通常コンソール用メモがわりに使う

無理にブレークポイントにこだわらなくても、選択した部分を実行する事ができるので、ファイルも普通のテキストファイルで問題ないし、Chrome から新規でファイルも作成できます。キャラクタセットが UTF-8 であれば、拡張子がなんであっても問題無いてすし、http(s) で表示したページの環境でをその選択した文字列を実行する事ができます。

もちろん通常のエディタとして行番号も表示されて、CTRL+G  で行ジャンプ用のウインドウも表示されます。左下の {} アイコンで拡張子に見合った整形も行いますし、タブキーも行を複数選択して機能します。



同じ選択で CTRL+SHIFT+E で繰り返し実行したい場合は、開いているファイルのタブをクリックしてからキー入力します。

右クリックからの実行でもかまいません




























































【Google Chromeの最新記事】

























posted by lightbox at 2018-01-11 21:35 




| Google Chrome
| このブログの読者になる
| 更新情報をチェックする



















































Powered by Seesaa

 
























container 終わり































✅ フリーフォントで簡単ロゴ作成

✅ フリーフォントでボタン素材作成

✅ フリーフォントで吹き出し画像作成

✅ フリーフォントではんこ画像作成

✅ ほぼ自由に利用できるフリーフォント

✅ フリーフォントの書体見本とサンプル

✅ 画像を大きく見る為のウインドウを開くボタンの作成





































✅ CSS ドロップシャドウの参考デモ

✅ イラストAC

✅ ぱくたそ

✅ 写真素材 足成

✅ フリーフォント一覧

✅ utf8 文字ツール












右サイド 終わり



base 終わり