Debug JavaScript in Safari

Debug JavaScript in Safari in 7 easy steps [2019]  



The steps we are going to follow are:

1. Sample Project Introduction 
2. Analyse a Raygun Error Report 
3. Explore the Anatomy of Web Inspector 
4. Add Breakpoints to your Code 
5. Step through your Code 
6. Determine the State of your Application 
7. Fix the Bug! 

So, let’s dive in!

Related information:
Safari (Web Development Tools)

Metrics for URL defined Subsites with Matomo

Image: Kévin Subileau

<!-- Matomo -->
<script type="text/javascript">
            
    var _paq = _paq || [];
            
    _paq.push(['trackPageView']);
    _paq.push(['enableLinkTracking']);

        (function () {
                
            var u = "//committees-analytics.innocraft.cloud/";
            _paq.push(['setTrackerUrl', u + 'piwik.php']);
                
            if(window.location.href.indexOf("/EN/one-stop-shop/") != -1){
                _paq.push(['setSiteId', '8']);
            }
            else if(window.location.href.indexOf("/EN/Secretary_General/") != -1){
                _paq.push(['setSiteId', '7']);
            }
            else if(window.location.href.indexOf("/EN/Directorate_A/") != -1){
                _paq.push(['setSiteId', '9']);
            }
            else if(window.location.href.indexOf("/EN/Directorate_B/") != -1){
            _paq.push(['setSiteId', '10']);
            }
            else if(window.location.href.indexOf("/EN/Directorate_C/") != -1){
                _paq.push(['setSiteId', '11']);
            }
            else if(window.location.href.indexOf("/EN/Directorate_D/") != -1){
                _paq.push(['setSiteId', '12']);
            }
            else if(window.location.href.indexOf("/EN/Directorate_E/") != -1){
                _paq.push(['setSiteId', '13']);
            }
            else if(window.location.href.indexOf("/Staff-Representation/") != -1){
                _paq.push(['setSiteId', '14']);
            }
            else {
                _paq.push(['setSiteId', '3']);
            }                                                                                                                                                                                                             
                
            var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
            g.type = 'text/javascript'; g.async = true; g.defer = true; g.src = u + 'piwik.js'; s.parentNode.insertBefore(g, s);

        })();

</script>
<!-- End Matomo Code -->

Using SVG with CSS3 and HTML5

Using SVG with CSS3 and HTML5: Supplementary Material 

[Example code and online extras for the O'Reilly Media book by Amelia Bellamy-Royds, Kurt Cagle, and Dudley Storey]

Chapters

Read a summary of each chapter, and find the code for each example and figure:

Part I: SVG on the Web
Graphics from Vectors: An Overview of SVG
The Big Picture: SVG and the Web
A Sense of Style: Working with CSS
Tools of the Trade: Software and Sources to Make SVG Easier

Part II. Drawing with Markup
Building Blocks: Basic Shapes
Following Your Own Path: Custom Shapes
The Art of the Word: Graphical Text Layout and Fonts

Part III. Putting Graphics in Their Place
Scaling Up: Defining Coordinate Systems
A New Point of View: Cropping Embedded SVG Files
Seeing Double: Re-using Content
Transformative Changes: Coordinate System Transformations

Part IV. Artistic Touches
Filling Up To Full: The fill Property, Gradients, & Patterns
Drawing the Lines: Stroke Effects
Marking the Way: Line Markers
Less Is More: Clipping and Masking
Playing with Pixels: Filters and Blend Modes

Part V. SVG as an Application
Beyond the Visible: Metadata for Accessibility and Added Functionality
Drawing on Demand: Interactive SVG
Transitioning in Time: Animation
Good Manners: Best Practices for SVG

SVG and SVG tools

[Styling and animating SVG with CSS]
[w3schools]

CSS can be used to style and animate scalable vector graphics, much like it is used to style and animate HTML elements. In this article, which is a modified transcript of a talk I recently gave at CSSconf EU and From the Front, I’ll go over the prerequisites and techniques for working with CSS in SVG... (1)

(1) Styling and animating SVG with CSS

W3C:

Scalable Vector Graphics (SVG) 2

SVG Property index

SVG Styling

Tools:
SVG Editor

SVGOMG web service

Samples:
Iconic (icon set)

Other:

Todd Parker’s presentation