How can I debug leaflet map events in angular?

Question

I'm trying to add an interactive map layer using ngx-leaflet package by loading a geojson object. here is my code:

private createGeoJsonLayer(cords){
return L.geoJSON(
  cords as any,
  {
    style: () => ({
      weight: 0.15,
      fillColor: this.currentTheme.countryFillColor,
      fillOpacity: 0.2,
      color: '#000',
      opacity: 1,
    }),
    onEachFeature: (feature, layer) => {
           layer.on({
                    mouseover: (e) => this.highlightFeature(e.target),
                    mouseout: (e) => this.moveout(e.target),
                    click: (e) => this.selectFeature(e.target),
                    });

And in my constructor:

  constructor(private ecMapService: LocationBaseReportMapService,
private theme: NbThemeService) {
combineLatest([
  this.ecMapService.loadCounties(null),
  this.theme.getJsTheme(),
])
  .pipe(takeWhile(() => this.alive))
  .subscribe(([cords, config]: [any, any]) => {
    this.currentTheme = config.variables.countryOrders;
    this.layers = [this.createGeoJsonLayer(cords)];
  });

None of these events fired up, any suggestion to debug this issue? I also tried chrome debugger with breakpoints but doesn't hit, I know debugging observables is a little bit tricky and I'm newbie at this topic. thanks for your help