如何使用chrome正确调试Angular应用程序

我开发了一个应用程序，Angular作为前端框架，SpringBoot作为后端。我的任务是在浏览器上显示从Rest API传递的数据。每件事情都很好，但我在调试过程中遇到了麻烦

雇员控制员

@CrossOrigin(origins = "http://localhost:4200")
@RestController
@RequestMapping("/restApi/app")
public class EmployeeController {
    @Autowired
    private EmployeeRepository employeeRepository;

    @GetMapping("/employees")
    public List<Employee> getAllEmployees() {
        return employeeRepository.findAll();

    }

但是在console.log（）输出和调试过程中没有显示它，但是数据正确地显示在网页上，如上所示

---

请帮助我了解如何调试和查看从后端传递的数据。这对我将来在进行更复杂的工作时的开发工作非常有帮助。谢谢。

员工是可观察的，因此您无法直接看到结果

你有两种方法可以做到这一点，我将告诉你两种：

• 在Chrome开发工具（或任何其他工具）中，您有一个“网络”选项卡，您可以在那里看到请求
• 如果您想直接在代码中添加一些内容，可以在管道中使用rxjs映射，并在其中进行控制台登录

例如：

reloadData(){
    this.employees = this.employeeService.getEmployeesList().pipe(
        map( response => {
            console.log(response);
            //return the response value
            return response;
        })
    )
}

[{"id":34,"firstName":"Jade","lastName":"Mart","emailId":"jm18@gmail.com"},{"id":35,"firstName":"Patric","lastName":"Anderson","emailId":"patric@gmail.com"}]

reloadData(){
    this.employees = this.employeeService.getEmployeesList().pipe(
        map( response => {
            console.log(response);
            //return the response value
            return response;
        })
    )
}