Detect design mode in Lightning Component

Here's a hacky way of accomplishing this. It relies on the URL of the page editor not changing.

Component:

<aura:component implements="flexipage:availableForRecordHome">
    <!-- Attributes -->
    <aura:attribute name="inDesignMode" type="Boolean" default="false"/>

    <!-- Handlers -->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <!-- Body -->
    <aura:renderIf isTrue="{!v.inDesignMode}">
        <lightning:card>
            Component is in design mode.
        </lightning:card>
    </aura:renderIf>
</aura:component>

Controller:

({
    doInit: function (component, event, helper) {
        var inDesignMode = document.location.href.toLowerCase().indexOf( 
'flexipageeditor' ) >= 0;
        component.set("v.inDesignMode", inDesignMode);
    },
})

I'd recommend implementing it as a service component if you need to use it in multiple components.

There's a Debug mode available in Lightning Components if that's what you are looking for.

Quoting the relevant text

There are two modes: production and debug. By default, the Lightning Component framework runs in production mode. This mode is optimized for performance. It uses the Google Closure Compiler to optimize and minimize the size of the JavaScript code. The method names and code are heavily obfuscated.

When you enable debug mode, the framework doesn't use Google Closure Compiler so the JavaScript code isn't minimized and is easier to read and debug.

To enable debug mode for your org:

From Setup, enter Lightning Components in the Quick Find box, then select Lightning Components. Select the Enable Debug Mode checkbox. Click Save.

Depending on your exact use case, you may also want to look at the Lightning Inspector Chrome Extension.