Removing unused code

[Norm_3]

I have a webpage for showing placemarkers on a map. I have used chatGPT to get lots of bits of code that I have copied into my project including parts that I do not use. The code has most of the features I want so far.
I would like to remove the unused parts like CSS selectors and javascript functions.
Is there a tool that will scan an html page with includes and give a report of what and where CSS selectors and javascript functions are used? And not used so I can remove them.
The webpage is here:ShowPathOnMap
Thanks,
Norm

[Salem]

Like this -> https://eslint.org/blog/2025/02/eslint-css-support/

"lint" is a generic term for programs that identify all manner of issues in code. So you can type into your favourite search engine terms like "lint javascript" and "lint css".

[Norm_3]

Does lint find unused code in a multi-file webpage? I have several js and css files that are included in my html page. On the referenced page at the link you provided I see a program: npm that will install @eslint/css. After the install, how does one execute the program to do the scan on the files and create the report of usages I am looking for.

[Norm_3]

Does lint find unused code in a multi-file webpage? I have several js and css files that are included in my html page. On the referenced page at the link you provided I see a program: npm that will install @eslint/css. After the install, how does one execute the program to do the scan on the files and create the report of usages I am looking for.

Thanks for the reference to lint. I just tried something like lint with my html file and it showed me lots of errors. I'd forgotten how forgiving browsers are. I was relying on the console log to show errors.
Norm

[Dani]

The console log never shows any HTML or CSS errors, only Javascript and HTTP errors, as far as I'm aware.

If you're not doing so already, I would recommend using a CSS preprocessor such as Sass. Such frameworks are pretty much a requirement when working with larger projects to keep your CSS neat and organized and ensure ensure it never gets out of hand.

[Dani]

You can install Sass directly here: https://sass-lang.com/install/

At DaniWeb, we use the Bootstrap CSS framework. We change the variables as wanted and extend the framework with Sass. Then, to compile the Sass into pure CSS, I run npm run dist and it creates the minified CSS files in the dist folder.

[Norm_3]

I'm not sure I want to install all these packages for my small, one time project. The online html scanner worked nicely and pointed out several coding errors. What I would like now is a scanner that will take my html file as input and use the LINK href= and script src= statements to read in the dozen or so css and js files and give me a report on where the CSS selectors are used and where the JS functions are used. That report should show what items are not used and that I can remove from the code.

[Dani]

You can try using something like this.

However, CSS isn't really handwritten like this anymore. I would recommend Sass because, if the goal of the project is to learn CSS, you might as well learn modern CSS instead of the way things were done 15-20 years ago.

[Dani]

You can also use this built-in Chrome feature. Good luck! :)

[NormR1]

See also this thread: My other id

[WendyDolan]

Yeah cleaning up unused code can be surprisingly tricky. Sometimes am not even sure if a function is still in use or not so I end up leaving it just in case. Do you usually do it manually or use some tool to detect it? I’ve been wondering if hosting on a fast web host makes any difference when testing changes like this.

[NormR1]

Being a programmer who loves writing code, I wrote an adhoc Quick and Dirty program to scan my html/css/js and give me a report of what and where items are defined and used. Here is its report. There are 3 sections: IDs, CSS and js functions. It shows the items name, where it is defined and where it is referenced.

Running: java.exe ReportUsages

*** Starting scan of ../ShowPathProject/ShowPathOnMapLocal.html ***
... some debug output removed
CSS in class=
{container=name=container
  def=[tailwind.css at 314, tailwind.css at 318, tailwind.css at 323, tailwind.css at 328, tailwind.css at 333, tailwind.css at 338]
  ref=[ShowPathOnMapLocal.html at 42]
 fa-map-pin=name=fa-map-pin
  def=[all.min.css at 3720]
  ref=[getLocationMarks.js at 115]
 empty-message=name=empty-message
  def=[markers.css at 74]
  ref=[ShowPathOnMapLocal.html at 108, getLocationMarks.js at 140]
 search-card=name=search-card
  def=[markers.css at 138]
  ref=[ShowPathOnMapLocal.html at 122]
 toast.show=name=toast.show
  def=[markers.css at 96]
  ref=null
 text-sm=name=text-sm
  def=[tailwind.css at 394]
  ref=[ReadFile.js at 65, ReadFile.js at 132]
 saved-marker=name=saved-marker
  def=[markers.css at 70]
  ref=null
 marker-item=name=marker-item
  def=[markers.css at 24, markers.css at 35]
  ref=null
 markers-list=name=markers-list
  def=[markers.css at 14]
  ref=[ShowPathOnMapLocal.html at 107]
 p-1=name=p-1
  def=[tailwind.css at 377]
  ref=[ReadFile.js at 65, ReadFile.js at 132]
 p-4=name=p-4
  def=[tailwind.css at 374]
  ref=[ShowPathOnMapLocal.html at 42]
 sidebar=name=sidebar
  def=[markers.css at 106]
  ref=null
 text-center=name=text-center
  def=[tailwind.css at 380]
  ref=[ShowPathOnMapLocal.html at 75]
 fas=name=fas
  def=[all.min.css at 18, all.min.css at 31, all.min.css at 6885]
  ref=[ShowPathOnMapLocal.html at 123, ShowPathOnMapLocal.html at 127, getLocationMarks.js at 115, getLocationMarks.js at 156, getLocationMarks.js at 159]
 p-8=name=p-8
  def=[mainStyles.css at 80]
  ref=[ShowPathOnMapLocal.html at 42]
 marker-btn=name=marker-btn
  def=[markers.css at 54, markers.css at 63]
  ref=[getLocationMarks.js at 155, getLocationMarks.js at 158]
 font-sans=name=font-sans
  def=[tailwind.css at 383]
  ref=[ReadFile.js at 65, ReadFile.js at 132]
 font-bold=name=font-bold
  def=[tailwind.css at 401]
  ref=[ReadFile.js at 66, ReadFile.js at 133]
 text-base=name=text-base
  def=[mainStyles.css at 83]
  ref=[ReadFile.js at 65, ReadFile.js at 132]
 marker-coords=name=marker-coords
  def=[markers.css at 43]
  ref=[getLocationMarks.js at 152]
 toast=name=toast
  def=[markers.css at 81]
  ref=[ShowPathOnMapLocal.html at 40]
 mb-8=name=mb-8
  def=[tailwind.css at 349]
  ref=[ShowPathOnMapLocal.html at 75]
 search-box=name=search-box
  def=[markers.css at 133]
  ref=[ShowPathOnMapLocal.html at 125]
 marker-info=name=marker-info
  def=[markers.css at 39]
  ref=[getLocationMarks.js at 150]
 text-gray-600=name=text-gray-600
  def=[tailwind.css at 407]
  ref=[ShowPathOnMapLocal.html at 75]
 mt-1=name=mt-1
  def=[tailwind.css at 352]
  ref=[ReadFile.js at 68]
 leaflet-containerXXX=name=leaflet-containerXXX
  def=[mainStyles.css at 5]
  ref=null
 app-header=name=app-header
  def=[markers.css at 116, markers.css at 120]
  ref=null
 leaflet-popup-contentREMOVE=name=leaflet-popup-contentREMOVE
  def=[mainStyles.css at 34]
  ref=null
 containing_div=name=containing_div
  def=[draggableStyle.css at 1]
  ref=null
 delete=name=delete
  def=null
  ref=[getLocationMarks.js at 158]
 leaflet-popup-content-wrapper=name=leaflet-popup-content-wrapper
  def=[mainStyles.css at 19, mainStyles.css at 27, leaflet.css at 482, leaflet.css at 521]
  ref=null
 popupWindow=name=popupWindow
  def=[popup.css at 1]
  ref=[ShowPathOnMapLocal.html at 83, ShowPathOnMapLocal.html at 100, ShowPathOnMapLocal.html at 117, ShowPathOnMapLocal.html at 135]
 marker-btn.delete=name=marker-btn.delete
  def=[markers.css at 67]
  ref=null
 mouseHere=name=mouseHere
  def=[draggableStyle.css at 9]
  ref=[ShowPathOnMapLocal.html at 84, ShowPathOnMapLocal.html at 101, ShowPathOnMapLocal.html at 118, ShowPathOnMapLocal.html at 136]
 fa-search-plus=name=fa-search-plus
  def=[all.min.css at 5201]
  ref=[getLocationMarks.js at 156]
 coordinates-card,=name=coordinates-card,
  def=[markers.css at 128]
  ref=null
 marker-actions=name=marker-actions
  def=[markers.css at 49]
  ref=[getLocationMarks.js at 154]
 mx-auto=name=mx-auto
  def=[tailwind.css at 342]
  ref=[ShowPathOnMapLocal.html at 42, ShowPathOnMapLocal.html at 75]
 button-like-label=name=button-like-label
  def=[mainStyles.css at 61, mainStyles.css at 75]
  ref=[ShowPathOnMapLocal.html at 48]
 text-lg=name=text-lg
  def=[tailwind.css at 390]
  ref=[ShowPathOnMapLocal.html at 75, ReadFile.js at 66, ReadFile.js at 133]
 marker-name=name=marker-name
  def=[markers.css at 19]
  ref=[getLocationMarks.js at 151]
 text-xl=name=text-xl
  def=[mainStyles.css at 87]
  ref=[ReadFile.js at 66]
 max-w-2xl=name=max-w-2xl
  def=[tailwind.css at 361]
  ref=[ShowPathOnMapLocal.html at 75]
 leaflet-popup-tipREMOVE=name=leaflet-popup-tipREMOVE
  def=[mainStyles.css at 31]
  ref=null
 zoom=name=zoom
  def=null
  ref=[getLocationMarks.js at 155]
 search-card,=name=search-card,
  def=[markers.css at 166]
  ref=null
 font-semibold=name=font-semibold
  def=[mainStyles.css at 91]
  ref=[ReadFile.js at 69, ReadFile.js at 70]
 fa-trash=name=fa-trash
  def=[all.min.css at 3219]
  ref=[getLocationMarks.js at 159]
 fa-search=name=fa-search
  def=[all.min.css at 4276]
  ref=[ShowPathOnMapLocal.html at 123, ShowPathOnMapLocal.html at 127]
 text-gray-900=name=text-gray-900
  def=[tailwind.css at 415]
  ref=[ReadFile.js at 66, ReadFile.js at 133, ReadFile.js at 136]
 text-gray-700=name=text-gray-700
  def=[tailwind.css at 419]
  ref=[ReadFile.js at 68]
 main-content=name=main-content
  def=[markers.css at 102, markers.css at 124]
  ref=null<>}

IDs
{mainMenu=name=mainMenu
  def=[ShowPathOnMapLocal.html at 59]
  ref=[HandlePopups.js at 4]
 popup1Menu=name=popup1Menu
  def=[ShowPathOnMapLocal.html at 90]
  ref=[HandlePopups.js at 32, HandlePopups.js at 52, HandlePopups.js at 84, popupManagerScripts.js at 43, popupManagerScripts.js at 48, popupManagerScripts.js at 96, popupManagerScripts.js at 138]
 message4PU2=name=message4PU2
  def=[ShowPathOnMapLocal.html at 105]
  ref=[popupManagerScripts.js at 114]
 closePopup6=name=closePopup6
  def=[ShowPathOnMapLocal.html at 131]
  ref=[popupManagerScripts.js at 11]
 showPath=name=showPath
  def=[ShowPathOnMapLocal.html at 51]
  ref=[ShowPathOnMapLocal.html at 223]
 closePopup5=name=closePopup5
  def=[ShowPathOnMapLocal.html at 162]
  ref=[popupManagerScripts.js at 8]
 markers-list=name=markers-list
  def=[ShowPathOnMapLocal.html at 107]
  ref=[getLocationMarks.js at 18]
 search-input=name=search-input
  def=[ShowPathOnMapLocal.html at 126]
  ref=[markers.css at 142, getLocationMarks.js at 65, getLocationMarks.js at 192, getLocationMarks.js at 220]
 popup6Window=name=popup6Window
  def=[ShowPathOnMapLocal.html at 117]
  ref=[popupManagerScripts.js at 12, popupManagerScripts.js at 52, popupManagerScripts.js at 53]
 file-input=name=file-input
  def=[ShowPathOnMapLocal.html at 47]
  ref=[ShowPathOnMapLocal.html at 221]
 message5PU2=name=message5PU2
  def=[ShowPathOnMapLocal.html at 153]
  ref=null
 popup1Window=name=popup1Window
  def=[ShowPathOnMapLocal.html at 83]
  ref=[popupManagerScripts.js at 4, popupManagerScripts.js at 83, popupManagerScripts.js at 84]
 map=name=map
  def=[ShowPathOnMapLocal.html at 73]
  ref=[markers.css at 110, mainStyles.css at 12]
 popup6Title=name=popup6Title
  def=[ShowPathOnMapLocal.html at 119]
  ref=null
 popup1Windowheader=name=popup1Windowheader
  def=[ShowPathOnMapLocal.html at 84]
  ref=null
 popup2Window=name=popup2Window
  def=[ShowPathOnMapLocal.html at 100]
  ref=[popupManagerScripts.js at 17, popupManagerScripts.js at 31, popupManagerScripts.js at 120, popupManagerScripts.js at 121]
 search-btn=name=search-btn
  def=[ShowPathOnMapLocal.html at 127]
  ref=[markers.css at 157, getLocationMarks.js at 64]
 popup2Windowheader=name=popup2Windowheader
  def=[ShowPathOnMapLocal.html at 101]
  ref=null
 popup5Windowheader=name=popup5Windowheader
  def=[ShowPathOnMapLocal.html at 136]
  ref=null
 message=name=message
  def=[ShowPathOnMapLocal.html at 55]
  ref=[ShowPathOnMapLocal.html at 222]
 popup2Title=name=popup2Title
  def=[ShowPathOnMapLocal.html at 102]
  ref=null
 toast=name=toast
  def=[ShowPathOnMapLocal.html at 40]
  ref=[getLocationMarks.js at 24]
 popup5Window=name=popup5Window
  def=[ShowPathOnMapLocal.html at 135]
  ref=[popupManagerScripts.js at 9, popupManagerScripts.js at 76, popupManagerScripts.js at 77]
 placeMarker=name=placeMarker
  def=[ShowPathOnMapLocal.html at 66]
  ref=[popupManagerScripts.js at 56]
 popup5Title=name=popup5Title
  def=[ShowPathOnMapLocal.html at 137]
  ref=null
 control-banner=name=control-banner
  def=[ShowPathOnMapLocal.html at 44]
  ref=null
 closePopup2=name=closePopup2
  def=[ShowPathOnMapLocal.html at 113]
  ref=[popupManagerScripts.js at 15]
 startMeasure=name=startMeasure
  def=[ShowPathOnMapLocal.html at 111]
  ref=[popupManagerScripts.js at 21]
 clearMarkers=name=clearMarkers
  def=[ShowPathOnMapLocal.html at 112]
  ref=[popupManagerScripts.js at 34]
 popup6Windowheader=name=popup6Windowheader
  def=[ShowPathOnMapLocal.html at 118]
  ref=null
 closePopup1=name=closePopup1
  def=[ShowPathOnMapLocal.html at 96]
  ref=[popupManagerScripts.js at 3]
 message4PU1=name=message4PU1
  def=[ShowPathOnMapLocal.html at 95]
  ref=[HandlePopups.js at 97, HandlePopups.js at 107, HandlePopups.js at 119, popupManagerScripts.js at 85]
 popup1Title=name=popup1Title
  def=[ShowPathOnMapLocal.html at 86]
  ref=[popupManagerScripts.js at 87]<>}

functions
{dragElement=name=dragElement
  def=[draggableScript.js at 3]
  ref=[draggableScript.js at 3, popupManagerScripts.js at 53, popupManagerScripts.js at 77, popupManagerScripts.js at 84, popupManagerScripts.js at 121]
 showMessage=name=showMessage
  def=[ReadFile.js at 271]
  ref=[ReadFile.js at 14, ReadFile.js at 26, ReadFile.js at 208, ReadFile.js at 271]
 buildMarkerIcon=name=buildMarkerIcon
  def=[ReadFile.js at 251]
  ref=[ReadFile.js at 75, ReadFile.js at 143, ReadFile.js at 251]
 handleMeasureOnPath=name=handleMeasureOnPath
  def=[popupManagerScripts.js at 125]
  ref=[HandlePopups.js at 15, popupManagerScripts.js at 125]
 openPopup1=name=openPopup1
  def=[popupManagerScripts.js at 82]
  ref=[popupManagerScripts.js at 42, popupManagerScripts.js at 47, popupManagerScripts.js at 82, popupManagerScripts.js at 136]
 dragMouseDown=name=dragMouseDown
  def=[draggableScript.js at 14]
  ref=[draggableScript.js at 8, draggableScript.js at 14]
 handleGotoPath=name=handleGotoPath
  def=[popupManagerScripts.js at 41]
  ref=[HandlePopups.js at 11, popupManagerScripts.js at 41]
 handlePlaceMarker=name=handlePlaceMarker
  def=[popupManagerScripts.js at 55]
  ref=[HandlePopups.js at 21, popupManagerScripts.js at 55]
 updateCoordinates=name=updateCoordinates
  def=[getLocationMarks.js at 72]
  ref=[getLocationMarks.js at 72, getLocationMarks.js at 95, getLocationMarks.js at 212]
 showToast=name=showToast
  def=[getLocationMarks.js at 253]
  ref=[ReadFile.js at 20, getLocationMarks.js at 107, getLocationMarks.js at 134, getLocationMarks.js at 174, getLocationMarks.js at 185, getLocationMarks.js at 195, getLocationMarks.js at 204, getLocationMarks.js at 224, getLocationMarks.js at 230, getLocationMarks.js at 253]
 handlePU1MenuDP=name=handlePU1MenuDP
  def=[HandlePopups.js at 51]
  ref=[HandlePopups.js at 51, popupManagerScripts.js at 48]
 updateMarkersList=name=updateMarkersList
  def=[getLocationMarks.js at 138]
  ref=[getLocationMarks.js at 132, getLocationMarks.js at 138, getLocationMarks.js at 184, getLocationMarks.js at 249, getLocationMarks.js at 265]
 openAbout=name=openAbout
  def=[popupManagerScripts.js at 75]
  ref=[HandlePopups.js at 23, popupManagerScripts.js at 75]
 calculateDistance=name=calculateDistance
  def=[ReadFile.js at 279]
  ref=[HandlePopups.js at 146, ReadFile.js at 108, ReadFile.js at 177, ReadFile.js at 243, ReadFile.js at 279, getLocationMarks.js at 50]
 addToSavedLocations=name=addToSavedLocations
  def=[getLocationMarks.js at 100]
  ref=[getLocationMarks.js at 60, getLocationMarks.js at 100, getLocationMarks.js at 218]
 searchLocation=name=searchLocation
  def=[getLocationMarks.js at 191]
  ref=[getLocationMarks.js at 64, getLocationMarks.js at 67, getLocationMarks.js at 191]
 showDistances=name=showDistances
  def=[ReadFile.js at 275]
  ref=[popupManagerScripts.js at 27, ReadFile.js at 275, getLocationMarks.js at 56]
 handlePU1Menu=name=handlePU1Menu
  def=[HandlePopups.js at 31]
  ref=[HandlePopups.js at 31, popupManagerScripts.js at 43, ShowPathOnMapLocal.html at 90]
 handleMeaureDist=name=handleMeaureDist
  def=[popupManagerScripts.js at 113]
  ref=[HandlePopups.js at 13, popupManagerScripts.js at 113]
 handleMarkerClickForMP=name=handleMarkerClickForMP
  def=[HandlePopups.js at 102]
  ref=[HandlePopups.js at 93, HandlePopups.js at 102, HandlePopups.js at 162]
 degreesToRadians=name=degreesToRadians
  def=[ReadFile.js at 325]
  ref=[ReadFile.js at 309, ReadFile.js at 310, ReadFile.js at 311, ReadFile.js at 312, ReadFile.js at 325]
 handleFileSelection=name=handleFileSelection
  def=[ReadFile.js at 7]
  ref=[ReadFile.js at 7, ShowPathOnMapLocal.html at 225]
 splitPolyline=name=splitPolyline
  def=[ReadFile.js at 218]
  ref=[ReadFile.js at 102, ReadFile.js at 171, ReadFile.js at 218]
 handleDeletePath=name=handleDeletePath
  def=[popupManagerScripts.js at 46]
  ref=[HandlePopups.js at 17, popupManagerScripts.js at 46]
 placeMarker=name=placeMarker
  def=[getLocationMarks.js at 79]
  ref=[HandlePopups.js at 20, getLocationMarks.js at 32, getLocationMarks.js at 79, getLocationMarks.js at 214]
 elementDrag=name=elementDrag
  def=[draggableScript.js at 25]
  ref=[draggableScript.js at 22, draggableScript.js at 25]
 calcDistance=name=calcDistance
  def=[ReadFile.js at 308]
  ref=[ReadFile.js at 289, ReadFile.js at 308]
 addOption=name=addOption
  def=[popupManagerScripts.js at 143]
  ref=[popupManagerScripts.js at 101, popupManagerScripts.js at 106, popupManagerScripts.js at 143]
 handlePU1MenuMP=name=handlePU1MenuMP
  def=[HandlePopups.js at 82]
  ref=[HandlePopups.js at 82, popupManagerScripts.js at 138]
 clearMarkers=name=clearMarkers
  def=[getLocationMarks.js at 228]
  ref=[popupManagerScripts.js at 34, popupManagerScripts.js at 35, getLocationMarks.js at 228]
 closeDragElement=name=closeDragElement
  def=[draggableScript.js at 38]
  ref=[draggableScript.js at 20, draggableScript.js at 38]
 handleMainMenu=name=handleMainMenu
  def=[HandlePopups.js at 3]
  ref=[HandlePopups.js at 3, ShowPathOnMapLocal.html at 59]
 openSearch=name=openSearch
  def=[popupManagerScripts.js at 51]
  ref=[HandlePopups.js at 19, popupManagerScripts.js at 51]<>}

0 error(s)

[fabwebstudio]

Hi Norm,

There isn’t a single tool that perfectly removes every unused selector or function, but you can combine a few lightweight ones to get an accurate report. Start with Chrome DevTools → Coverage, which shows exactly which CSS and JS bytes your page actually executes when you interact with it. Then use PurgeCSS to scan your HTML and JavaScript files and generate a cleaned-up CSS file (remember to safelist dynamic map classes like leaflet- or gm-*).

For JavaScript, run ESLint with the no-unused-vars rule or try Knip, which detects unused functions, exports, and files. Together, these tools will show what’s safe to delete so you can slim down your ShowPathOnMap project without breaking any active features.