Getting Started with Cocos Creator Debugging

Reprinted to: https://blog.csdn.net/potato47/article/details/79364727

It's better to ask for yourself. Today, I bring a tutorial for Mengxin to debug Cocos Creator games using Chrome. After learning to debug, you can solve many problems by yourself.

Ready to work

1. Download the star catcher game I wrote with ts  https://github.com/potato47/star-catcher
2. Make sure to install Chrome aka Google Chrome
3. Open the downloaded project with Cocos Creator, double-click the game scene, and preview the game with Chrome 
   

Open Chrome Developer Tools

Windows: F12 or  Ctrl+Shift+I 
Mac: Cmd+Opt+I 
Some webpages may block shortcut keys, then manually click on the upper right corner 

Developer Tools Common Options

Elements：

Used to view interface elements, often used in front-end development, but basically not used for debugging games 

Console：

console output, and of course input 

Ctrl+L clear console

Sources：

Resource files for web pages (games) 

Ctrl+Pfiles can be searched 

Make sure to turn on the Source Map here, so that you can see the original code 

Network：

data request information 

Networked games are often used, such as viewing some http requests

Performance：

real-time performance 

Press twice Ctrl+Eto get the real-time performance of the game running for a period of time, you can analyze how much time each module takes, and improve the game performance in a targeted manner

breakpoint debugging

Ctrl+PSearch and open  Game.ts , gameOverclick on the line number below the function to set a breakpoint, and the game will stop when it reaches this point 

Now you have the hand of God, what do you want to do?

• Hovering the mouse over the corresponding variable will display the corresponding value 
  
• View function run stack 
  

• Use the console to view variables 
  

• single step debugging 
  

These buttons represent the

• run to next breakpoint
• run to the next line
• into the body of the running function
• Jump out of the running function body
• Ignore breakpoints, that is, do not stop the program when a breakpoint is encountered
• Automatic breakpoints when the program runs with errors

As for the question of "I understand the truth, but where do I want to set a breakpoint", it depends on talent.

Additional points

• When the program runs, it debuggerwill automatically stop running 
  
• console.trace() Will output the function call stack 
  
• console.table() will output an object in tabular form 
  
• console.time() and  console.timeEnd()get the execution time of a piece of code 
  
• View global variables at any time 
  
  
• Console view API 
  
• Enter the function name (without parentheses) and double-click to enter the source code 
  

 

Copyright statement: This article is an original article by the blogger, please keep the original link blog.csdn.net/potato47 https://blog.csdn.net/potato47/article/details/79364727