VSCode配合chrome瀏覽器調試cocos2d js項目

1.準備階段

1. 具有調試功能的VSCode(個人是在win10上，版本是1.17.1)

2. 在VSCode裏下載安裝Debugger for Chrome擴展插件。

2.具體操做

1. 建立一個cocosjs工程 cocos new coco315Pro -l js -d 你的路徑 -p 包名

2. 使用VSCode打開這個工程。 Ctrl + o

3. 因爲cocosjs會加載json文件，因此須要把他部署到一個本地服務器上。我用nodejs建立了一個簡單的http服務器，可是很差使，雖然index.html會正常發到瀏覽器上，可是腳本加載的時候會報unexpected token <的錯誤。我記得cocos提供的命令cocos run -p web會先啓動一個本地服務器，因此經過查閱cocos.py,定位到引擎目錄下的tools/cocos2d-console/plugins/plugin_run下的project_run.py裏使用BaseHTTPServer建立了一個本地的http服務器。同時打開瀏覽器，訪問127.0.0.1:8000。
   

    def run_web(self, dependencies):
           if not self._platforms.is_web_active():
               return
   
           from SimpleHTTPServer import SimpleHTTPRequestHandler
           HandlerClass = SimpleHTTPRequestHandler
           ServerClass  = BaseHTTPServer.HTTPServer
           Protocol     = "HTTP/1.0"
           HandlerClass.protocol_version = Protocol
   
           host = self._host
           if self._port is None:
               port = 8000
               port_max_add = 2000
           else:
               port = int(self._port)
               port_max_add = 0
   
           deploy_dep = dependencies['deploy']
           run_root = deploy_dep.run_root
   
           i = 0
           httpd = None
           while (i <= port_max_add):
               port += i
               i += 1
               server_address = (host, port)
               try:
                   cocos.Logging.info(MultiLanguage.get_string('RUN_INFO_HOST_PORT_FMT', (host, port)))
                   httpd = ServerClass(server_address, HandlerClass)
               except Exception as e:
                   httpd = None
                   cocos.Logging.warning(MultiLanguage.get_string('RUN_WARNING_SERVER_FAILED_FMT', (host, port, e)))
   
               if httpd is not None:
                   break
   
           if httpd is None:
               raise cocos.CCPluginError(MultiLanguage.get_string('RUN_ERROR_START_SERVER_FAILED'),
                                         cocos.CCPluginError.ERROR_OTHERS)
   
           # from threading import Thread
           # sub_url = deploy_dep.sub_url
           # url = 'http://%s:%s%s' % (host, port, sub_url)
           # thread = Thread(target = self.open_webbrowser, args = (url,))
           # thread.start()
   
           sa = httpd.socket.getsockname()
           with cocos.pushd(run_root):
               cocos.Logging.info(MultiLanguage.get_string('RUN_INFO_SERVING_FMT', (sa[0], sa[1])))
               httpd.serve_forever()

4. 咱們把啓動瀏覽器的代碼註釋掉:
   

      # from threading import Thread
      # sub_url = deploy_dep.sub_url
      # url = 'http://%s:%s%s' % (host, port, sub_url)
      # thread = Thread(target = self.open_webbrowser, args = (url,))
      # thread.start()

5. 點擊VSCode左邊欄的Debug圖標(甲蟲圖案),自動彈出一個launch.json文件讓你配置。能夠參考https://go.microsoft.com/fwlink/?linkid=830387。

   我是這樣配置的:
   

   {
       "version": "0.2.0",
       "configurations": [
           {
               "name": "Launch localhost",
               "type": "chrome",
               "request": "launch",
               "url": "http://localhost:8000",
               "sourceMaps": true,
               "webRoot": "${workspaceRoot}"
           }
       ]
   }

3.開始調試

1. 咱們先在cmd裏輸入：
   

   cocos run -p web

2. 而後你就能夠打斷點,F5調試了
   

    等我在詳細看一下nodejs，再寫一個nodejs啓一個本地服務器的作法。