VSCode에서 F5에서 홈 화면을 시작하고 JaveScript를 단계별로 실행
VSCode에서 F5에서 홈 화면을 시작하고 TypeScript를 단계별로 실행 을 참조하십시오.
목표
쓰지 않는 것
전제
프로젝트 루트
공개 경로
포트
c:\src\cake-app
c:\src\cake-app\webroot
8765
C:\src\cake-app\bin>cake server
Welcome to CakePHP v3.8.11 Console
버전
-
버전
VScode
1.43.2
Debugger for Chrome
4.12.6
Debugger for Firefox
2.7.1
준비
(원하는 사용자) 확장을 설치하고 디버그 구성 파일 편집
ⅰ. Debugger for Chrome
/.vscode/launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome JavaScript",
"url": "http://localhost:8765",
"webRoot": "${workspaceFolder}/webroot"
}
]
}
ⅱ. Debugger for Firefox
/.vscode/launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "firefox",
"request": "launch",
"name": "Launch Firefox JavaScript",
"url": "http://localhost:8765",
"webRoot": "${workspaceFolder}/webroot",
}
]
}
단계 실행 대상 만들기
src/webroot/js/debug.js
document.addEventListener("DOMContentLoaded", function() {
console.log("on loaded");
});
home.ctp 에서 스텝 실행 대상 로드 ( <head></head> 안에 추가) --- a/src/Template/Pages/home.ctp
+++ b/src/Template/Pages/home.ctp
@@ -43,6 +43,8 @@ $cakeDescription = 'CakePHP: the rapid development PHP framework';
<?= $this->Html->css('style.css') ?>
<?= $this->Html->css('home.css') ?>
<link href="https://fonts.googleapis.com/css?family=Raleway:500i|Roboto:300,400,700|Roboto+Mono" rel="stylesheet">
+ <?= $this->Html->script('debug.js') ?>
+ <!-- ↑同じ <script src="/js/debug.js"></script> -->
</head>
단계 실행
※ firefox의 경우, 페이지의 리로드가 필요한 경우 있어 Troubleshooting
Reference
이 문제에 관하여(VSCode에서 F5에서 홈 화면을 시작하고 JaveScript를 단계별로 실행), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/hykisk/items/e58ec19149a23135d1a3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
