Display tile grid borders with leaflet (visual debugging)

Another option is to create a plugin like so -

L.GridLayer.GridDebug = L.GridLayer.extend({
  createTile: function (coords) {
    const tile = document.createElement('div');
    tile.style.outline = '1px solid green';
    tile.style.fontWeight = 'bold';
    tile.style.fontSize = '14pt';
    tile.innerHTML = [coords.z, coords.x, coords.y].join('/');
    return tile;
  },
});

L.gridLayer.gridDebug = function (opts) {
  return new L.GridLayer.GridDebug(opts);
};

map.addLayer(L.gridLayer.gridDebug());

Result -

map


Leaflet tiles have the leaflet-tile class You can use css to make the border visible

.leaflet-tile { border: solid black 5px; }

This would create black borders for each tile.

It worked for this example https://www.mapbox.com/mapbox.js/example/v1.0.0/wms/ by editing in the developer console of the browser.